Ext.form.ComboBox常用屬性詳解

Ext.form.ComboBox常用屬性詳解

標簽: Extjs js combo

js 代碼

var combo = new Ext.form.ComboBox({
    store : new Ext.data.SimpleStore({
        fields : ['value', 'text'],
        data : [['1001', '小兒迪巧'], ['1002', '成人迪巧'], ['1003', '秀源']]
    }),
    hiddenName:'product_code',//提交到后台的input的name
    mode:'local',//數據加載模式，'local'本地加載，'remote'遠程加載
    valueField : 'value',   //值字段
    displayField : 'text',  //顯示字段
    value:'1001',       //默認值,要設置為提交給后台的值，不要設置為顯示文本
    emptyText : '請選擇',  //提示信息
    mode : 'local', //數據加載模式，local代表本地數據
    triggerAction : 'all',  // 顯示所有下列數據，一定要設置屬性triggerAction為a
    readOnly : false,   //只讀，為true時不能編輯不能點擊
    editable:false,     //是否可編輯，為true時可以手寫錄入
    pageSize:0      //當設置大於0時會顯示分頁按鈕
})

如果在EditorGrid中使用Combo控件，編輯完后會發現顯示的值都是編碼而不是顯示值，可以ColumnMode中加入renderer方法對顯示值進行修改。下面是出自Combo源碼里的例子。

js 代碼

Ext.util.Format.comboRenderer = function(combo){
    return function(value){
        var record = combo.findRecord(combo.{@link #valueField}, value);
        return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};
    }
}

// create the combo instance
var combo = new Ext.form.ComboBox({
    {@link #typeAhead}: true,
    {@link #triggerAction}: 'all',
    {@link #lazyRender}:true,
    {@link #mode}: 'local',
    {@link #store}: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]
    }),
    {@link #valueField}: 'myId',
    {@link #displayField}: 'displayText'
});

// snippet of column model used within grid
var cm = new Ext.grid.ColumnModel([{
       ...
    },{
       header: "Some Header",
       dataIndex: 'whatever',
       width: 130,
       editor: combo, // specify reference to combo instance
       renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
    },
    ...
]);

Combo使用起來非常方便，還有很多屬性我們平時沒有用到，都設有默認值，比如錄入幾個字后進行數據查詢、顯示模板，下拉顯示高度等。如果對它的展示內容或方式不滿意，可以修改屬性對其進行擴展。源碼內注釋非常詳細，可以根據提示的信息對它進行改造。