学步园

创建Combobox

combobox可以自己输入值，也可以从下拉框中直接选择。输入的值可以不是下拉框的值。

如果下拉框的值是本地数据，最好设定queryMode为local，这样可以提高用户的响应速度。当typeAhead设定为true时，会自动选择下拉框中第一匹配的字段

            Ext.tip.QuickTipManager.init();

            // Define the model for a State
            Ext.define('State', {
                extend: 'Ext.data.Model',
                fields: [
                    { type: 'string', name: 'abbr' },
                    { type: 'string', name: 'name' },
                    { type: 'string', name: 'slogan' }
                ]
            });
            // The data for all states
            var states = [
                { "abbr": "AL", "name": "Alabama", "slogan": "The Heart of Dixie" },
                { "abbr": "WY", "name": "Wyoming", "slogan": "Like No Place on Earth" }
        ];

            // The data store holding the states; shared by each of the ComboBox examples below
            var store = Ext.create('Ext.data.Store', {
                model: 'State',
                data: states
            });

            // Simple ComboBox using the data store
            var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
                fieldLabel: 'Select a single state',
                renderTo: 'div1',
                displayField: 'name',
                width: 320,
                labelWidth: 130,
                store: store,
                queryMode: 'local',
                typeAhead: true
            });

2、设定combobox内容为空时显示的文字

            emptyText:'hello the world',

3、自定义数据模板和提示信息

             var customTplCombo = Ext.create('Ext.form.field.ComboBox', {
                fieldLabel: 'Select a single state',
                renderTo: 'div1',
                displayField: 'name',
                width: 500,
                labelWidth: 130,
                store: store,
                queryMode: 'local',
                listConfig: {
                    getInnerTpl: function() {
                        return '<div data-qtip="{name}. {slogan}">{name} ({abbr})</div>';
                    }
                }
            });

4、选择多个数据

            multiSelect:true,

 5、设置选中值(参数可以是数组 如：['1','2'])

combo.setValue('全部');

6、Combobox的内容回传到后台。设置name配置项，在后台就可以通过Request["monthCombo"]来获取combo选择的内容。现在还不知道怎么把valueField的传到后台。这样传过去的是NameField的值

name: 'monthCombo',

7、设置必须从下拉框中选择一个值，只需要设定forceSelection配置项

forceSelection: true,

8、订阅选择事件。在选择一个值后会触发改事件。value参数传过来的是一个数组，可以获取已经选择的内容

listeners: {
            select: {
                scope: this,
                fn: function(combo, value, option) {
                    var selectValue = value[value.length - 1].data.value;
                    if (selectValue == "全部") {
                        isSelectAll = true;
                        combo.setValue('全部');
                    }
                    else if (isSelectAll) {
                        isSelectAll = false;
                        combo.setValue(selectValue);
                    }
                }
            }
        }

9、把HTML的Select标记转换为Combobox

    <div id="transformCombo">
        <label for="stateSelect">
            Transformed select:</label>
        <select name="state" id="stateSelect">
            <option value="AL">Alabama</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
        </select>
    </div>

javascript代码

           var transformed = Ext.create('Ext.form.field.ComboBox', {
                typeAhead: true,
                transform: 'stateSelect',
                width: 135,
                forceSelection: true
            });