grid toolbar 中 Combobox 的问题

最新推荐文章于 2020-12-29 01:50:14 发布

最新推荐文章于 2020-12-29 01:50:14 发布 · 155 阅读

文章标签：

#EXT #F#

本文讨论了在使用ExtJS创建GridPanel时遇到的一个问题：如何在Toolbar中的ComboBox组件上正确获取值。通过分析代码，我们了解了如何设置ComboBox属性以确保在GridPanel中正常工作。

TestGrid 继承自 gridpanel，toolbar中有两个combobox，一个添加按钮，一个删除按钮，点击添加按钮时，取得两个combobox的内容，添加到grid中，代码如下：

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

//alert grid
TestGrid = function(){
    this.facilitycombox = new Ext.form.ComboBox({
        id : 'fc',
        name : 'facility',
        fieldLabel: 'Facility',
        store : new Ext.data.SimpleStore({ fields: ['value'], data : this.facilities }),
        displayField:'value',
        typeAhead: true,
        mode: 'local',
        selectOnFocus:true,
        allowBlank:false,
        emptyText : 'Select a facility...',
        triggerAction: 'all',
        listeners:{ scope: this }
        //scope : this
    });
    this.levelcombox = new Ext.form.ComboBox({
        id : 'lc',            
        name : 'level',
        fieldLabel: 'Level',
        store : new Ext.data.SimpleStore({ fields: ['name','val'], data : this.levels }),
        displayField:'name',
        valueField :'val',
        typeAhead: true,
        mode: 'local',
        selectOnFocus:true,
        allowBlank:false,
        emptyText : 'Select a level...',
        triggerAction: 'all',
        listeners:{scope: this }
        //scope : this
    })
    this.topbar = new Ext.Toolbar({
        scope : this,
        items :[
            this.facilitycombox,
            '-',
            this.levelcombox,
            '-',
            {
                id : "addbtn",
                text : "Add",
                pressed:true,
                tooltip:'Add an alert event',
                handler: this.addAlert
            },
            '-',
            {
                id : "delbtn",
                text : "Delete",
                pressed:true,
                tooltip:'Delete alert events',
                handler: this.deleteAlert
            }
        ]
    })
    this.sm = new Ext.grid.CheckboxSelectionModel();
    this.cm = new Ext.grid.ColumnModel([     
        new Ext.grid.RowNumberer(),
        this.sm,       
        {
            //id: 'facility',
            header: "Facility",
            dataIndex: 'facility',
            width: 60
        },
        {
            header: "Level",
            dataIndex: 'level',
            width: 40
        }        
    ]);
    this.myData = [[' ',' ']];
    this.ds = new Ext.data.Store({
        proxy:new Ext.data.MemoryProxy(this.myData),
        reader:new Ext.data.ArrayReader({id:0}, [
            {name:"facility"},
            {name:"level"}
        ])
    });
    //this.ds.load();
    this.cm.defaultSortable=true;
    TestGrid .superclass.constructor.call(this, {
        title : 'Edit alert event',
        width:600,
        height:300,
        store: this.ds,
        cm: this.cm,
        sm : this.sm,
        loadMask: true,
        autoScroll:true,
        viewConfig: { forceFit:true },        
        tbar : this.topbar
    })
}
Ext.extend(TestGrid , Ext.grid.GridPanel, {
    facilities : [['Kern'],['User'],['Mail'],['Daemon'],['Auth'],
        ['Syslog'], ['Lpr'],['News'],['Uucp'],['Cron'],
        ['System0'],['System1'],['System2'],['System3'],['System4'],['System5'],
        ['local0'],['local1'],['local2'],['local3'],['local4'],['local5'],['local6'],['local7']],
    levels : [['Emerg','0'],['Alert','1'],['Crit','2'],['Err','3'],['Warn','4'],['Notice','5'],['Info','6'],['Debug','7']],
    addAlert : function (){
        var f = this.levelcombox.getValue();
        alert(f);
    },
    deleteAlert : function(){}
})

运行的时候，错误信息为：this.levelcombox has no properties

现在无法取得combobox的值，如何实现这个功能？谢谢