CODEWITHSUNDEEP
javascriptextjsextjs3
sparsh610
sparsh610

Reputation: 1601

default in extjs combo-box

i am using extjs 3.4

Here is my code :

Ext.onReady(function() {
        var myPanel = new Ext.Panel({
            renderTo : document.body,
            height   : 500,
            width    : 1000,
            title    : 'Simple Panel',
            html     : 'This is my content',
            frame    : true,
            items: {
            layout: 'form',
            width: 200,
            labelAlign: 'top',
            style: 'margin-top: 5px;',
            items: {        
                xtype: 'combo',
                id: 'x',
                width: 115,
                listWidth: 115,
                fieldLabel: '<b>My combo</b>',
                labelStyle: 'font-size: 11px;',
                style: 'margin-left:20px',
                labelSeparator: '',
                forceSelection: true,
                value: 'A',     
                store: ['A', 'B', 'c'],                 
                autoSelect: true                    
            }
    }
        });

    });

I want to make 'A' as a default ... right now it is showing only 'A' in the combo box ... and 'B' and 'c' are missing(means both are missing from the list)

Please help

Upvotes: 0

Views: 222

Answers (2)

Nikolai Lopin
Nikolai Lopin

Reputation: 692

Append mode : 'local' to combo config.

It's possible to use combobox with array instead of store (http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox-cfg-store)

Upvotes: 0

Scriptable
Scriptable

Reputation: 19758

You are not defining a store properly or telling the combo which fields to use from the store.

Try the code below

var myPanel = new Ext.Panel({
    renderTo: Ext.getBody(),
    height: 500,
    width: 1000,
    title: 'Simple Panel',
    html: 'This is my content',
    frame: true,
    items: {
        layout: 'form',
        width: 200,
        labelAlign: 'top',
        style: 'margin-top: 5px;',
        items: {
            xtype: 'combo',
            id: 'x',
            width: 115,
            listWidth: 115,
            fieldLabel: '<b>My combo</b>',
            labelStyle: 'font-size: 11px;',
            style: 'margin-left:20px',
            labelSeparator: '',
            forceSelection: true,
            typeAhead: true,
            triggerAction: 'all',
            lazyRender:true,
            mode: 'local',
            value: 'A',
            store: new Ext.data.ArrayStore({
                id: 0,
                fields: [
                    'myId',
                    'displayText'
                ],
                data: [['A', 'A'], ['B', 'B'],  ['C', 'C']]
            }),
            valueField: 'myId',
            displayField: 'displayText',
            autoSelect: true
        }
    }
});

Key differences to note:

mode: 'local',
store: new Ext.data.ArrayStore({
            id: 0,
            fields: [
                'myId',
                'displayText'
            ],
            data: [['A', 'A'], ['B', 'B'],  ['C', 'C']]
        }),
        valueField: 'myId',
        displayField: 'displayText'

Reference: ExtJs 3.4 Combo with Local Data

Upvotes: 0

Related Questions