extjs3 - मैं एक सामान्य, एचटीएमएल चयन बॉक्स की तरह कार्य करने के लिए एक extjs कॉम्बो बॉक्स कैसे प्राप्त करूं?




(5)

एक्सटीजेएस एक फैंसी कॉम्बो-बॉक्स प्रदान करता है जिसमें बहुत सी फीचर्स हैं - यादृच्छिक टेक्स्ट एंट्री के लिए अनुमति दें, ड्रॉप-डाउन सूची में सभी प्रविष्टियों को छुपाएं जो पहले से दर्ज किए गए टेक्स्ट से स्टार न हों।

मुझे ये सुविधाएं नहीं चाहिए। मैं एक चुनिंदा बॉक्स चाहता हूं जो बिल्कुल वैसे ही व्यवहार करता है जैसे कि एक सामान्य चयन बॉक्स वेनिला एचटीएमएल में होगा।

मैं चाहता हूं कि यह डेटा स्टोर से जुड़ा हुआ हो, और मैं कॉम्बो बॉक्स के साथ आने वाले सभी अन्य एक्स्टजेस कॉन्फ़िगरेशन गुड्स चाहता हूं। मैं नहीं चाहता कि उपयोगकर्ता / परीक्षकों को एक चुनिंदा बॉक्स का सामना करना पड़े, जो इन चीजों को कैसे काम करते हैं, उनके मौजूदा मानसिक प्रतिमान को तोड़ देता है।

तो मैं एक चयन बॉक्स की तरह अधिक कार्य करने के लिए एक extjs कॉम्बो बॉक्स कैसे प्राप्त कर सकते हैं? या मैं गलत विजेट का उपयोग कर रहा हूँ?


Answers

क्या आपने typeAhead = false कोशिश की? यह भी सुनिश्चित नहीं है कि यह आपके इच्छित चीज़ों के करीब है या नहीं।

var combo = new Ext.form.ComboBox({
    typeAhead: false,

    ...

});

वर्तमान में स्वीकार्य समाधान बहुत अच्छा काम करता है, लेकिन अगर कोई कॉम्बोबॉक्स चाहता है जो एक सादे HTML चयन बॉक्स जैसे कीबोर्ड इनपुट को भी संभालता है (उदाहरण के लिए, प्रत्येक बार जब आप "पी" दबाते हैं तो "पी" से शुरू होने वाली सूची में अगला आइटम चुनता है) निम्नलिखित सहायक हो सकता है:

{
    xtype: 'combo',
    fieldLabel: 'Price',
    name: 'price',
    hiddenName: 'my_dropdown',
    autoSelect: false,
    allowBlank: false,
    editable: false,
    triggerAction: 'all',
    typeAhead: true,
    width:120,
    listWidth: 120,
    enableKeyEvents: true,
    mode: 'local',
    store: [
        ['val1', 'Appaloosa'],
        ['val2', 'Arabian'],
        ['val3', 'Clydesdale'],
        ['val4', 'Paint'],
        ['val5', 'Palamino'],
        ['val6', 'Quarterhorse'],
    ],
    listeners: {
        keypress: function(comboBoxObj, keyEventObj) {
            // Ext.Store names anonymous fields (like in array above) "field1", "field2", etc.
            var valueFieldName = "field1";
            var displayFieldName = "field2";

            // Which drop-down item is already selected (if any)?
            var selectedIndices = this.view.getSelectedIndexes();
            var currentSelectedIndex = (selectedIndices.length > 0) ? selectedIndices[0] : null;

            // Prepare the search criteria we'll use to query the data store
            var typedChar = String.fromCharCode(keyEventObj.getCharCode());
            var startIndex = (currentSelectedIndex == null) ? 0 : ++currentSelectedIndex;

            var matchIndex = this.store.find(displayFieldName, typedChar, startIndex, false);

            if( matchIndex >= 0 ) {
                this.select(matchIndex);
            } else if (matchIndex == -1 && startIndex > 0) {
                // If nothing matched but we didn't start the search at the beginning of the list
                // (because the user already had somethign selected), search again from beginning.
                matchIndex = this.store.find(displayFieldName, typedChar, 0, false);                                
                if( matchIndex >= 0 ) {
                    this.select(matchIndex);
                }
            }

            if( matchIndex >= 0 ) {
                var record = this.store.getAt(matchIndex);
                this.setValue(record.get(valueFieldName));
            }
        }
    }
}


var buf = []; 
buf.push('<option>aA1</option>');
buf.push('<option>aA2</option>');
buf.push('<option>bA3</option>');
buf.push('<option>cA4</option>');

var items = buf.join('');
new Ext.Component({
    renderTo: Ext.getBody(),
    autoEl: {
         tag:'select',
         cls:'x-font-select',
         html: items
    }
 });

मैंने कोशिश की, और महान काम करता है!

HTML कोड:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

सीएसएस

/* flip the pane when hovered */
        .flip-container:hover .flipper, .flip-container.hover .flipper {
            transform: rotateY(180deg);
        }

    .flip-container, .front, .back {
        width: 320px;
        height: 480px;
    }

    /* flip speed goes here */
    .flipper {
        transition: 0.6s;
        transform-style: preserve-3d;

        position: relative;
    }

    /* hide back of pane during swap */
    .front, .back {
        backface-visibility: hidden;

        position: absolute;
        top: 0;
        left: 0;
    }

    /* front pane, placed above back */
    .front {
        z-index: 2;
        /* for firefox 31 */
        transform: rotateY(0deg);
    }

    /* back, initially hidden pane */
    .back {
        transform: rotateY(180deg);
    }

मैं इसे बूटस्ट्रैप col-sm-* के अंदर उपयोग करता हूं और बहुत अच्छा काम करता हूं

<div class="col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
                    <div class="content-box flipper">
                        <div class="content-box-front">
                            <span class="glyphicon glyphicon-envelope content-box-icon"></span>
                            <h4>Share your emotions</h4>
                        </div>
                        <div class="content-box-back">
                            <p>Share emotions with friends, family and teammates.</p>
                            <button>Read more</button>
                        </div>
                    </div>
                </div>

सीएसएस

.content-box
{
    position: relative;
    text-align: center;
    height: 105px;
    width: 100%;
}
.content-box-icon
{
    font-size: 30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    display: block;
    margin: 5px auto 15px auto;
    color: #fff;
    float: none; 
    background:#25acfd                     
}
.content-box-front
{
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
}
.content-box-back
{
    transform: rotateY(180deg);
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
}
/* entire container, keeps perspective */
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}