ExtJs 学习小笔记之下拉框

xiaoyeshen · 2014-09-03 20:12 · 2998次阅读

Ext.onReady(function(){
    var qz = new Ext.Action({
        text:'取值',
        handler:function(){
            var p = Ext.getCmp('c1').getRawValue();
            var c = Ext.getCmp('c2').getRawValue();
            if(Ext.isEmpty(p) || Ext.isEmpty(c)){
                Ext.Msg.alert('提示','请选择,再取值');
            }else{
                Ext.Msg.alert('Message',p+c);
            }
        }
    });
    var jy = new Ext.Action({
        text:'禁用',
        handler:function(){
            Ext.getCmp('c1').disable();
            Ext.getCmp('c2').disable();
        }
    });
    var jh = new Ext.Action({
        text:'激活',
        handler:function(){
            cb1.enable();
            cb2.enable();
        }
    });
    var sp = new Ext.data.ArrayStore({
        fields: ['pId','province'],
        data : [[1,'湖北省'],[2,'广东省']]
    });
    var sc = new Ext.data.ArrayStore({
        fields: ['cId','city'],
        data : [[]]
    });
    var data1 = [[1,'武汉市'],[2,'鄂州市'],[3,'孝感市']];
    var data2 = [[1,'深圳市'],[2,'东莞市']];
    var cb1 = new Ext.form.ComboBox({
        id:'c1',
        fieldLabel: '请选择',  
        xtype: 'combo',
        //自动匹配内容
        typeAhead: true,
        triggerAction: 'all',
        valueField: 'pId',
        displayField: 'province',
        //第一次点击触发器时不自动加载store
        mode: 'local',
        value:1,
        store: sp
    })
    //监听下拉框
    cb1.on('select', function() {
        cb2.enable();
        var value = cb1.getValue();
        if(value == 1){
            sc.removeAll();
            sc.loadData(data1);
        }else if(value == 2){
            sc.removeAll();
            sc.loadData(data2);
        }
    });
    var cb2 = new Ext.form.ComboBox({
            id:'c2',
            fieldLabel: '请选择',  
            xtype: 'combo',
            typeAhead: true,
            triggerAction: 'all',
            valueField: 'cId',
            displayField: 'city',
            mode: 'local',//加载本地数据
            emptyText :'请选择',
            store:sc
        })
    var form = new Ext.form.FormPanel({
        height:100,
        labelWidth:70,
        labelAlign:'right',
        tbar:[qz,'-',jy,jh],
        items:[cb1,cb2]
    });
    
    var window = new Ext.Window({
        title:'下拉选择框(本地资源)',
        width:300,
        height:250,
        collapsible:true,
        plain:true,
        buttonAlign : 'right',
        items:form,
        buttons : [{
            type : 'reset',
            text : '重置',
            icon:'resources/images/yourtheme/grid/refresh.gif',
            iconAlign:'left',
            handler : function() {
                form.form.reset();
            }
        }]
    });
    sc.loadData(data1);
    window.show();
})

//此为简单的下拉框小联动,数据为写死数据。

//联动无非是下拉框触发事件,然后做出反应。

//下拉框的取值:

Ext.getCmp(‘c1’).getRawValue();

//上面的取法是取到下拉框的文本值

Ext.getCmp(‘c1’).getValue();

//上面的取法是取到下拉框的ID值

valueField: ‘pId’,
displayField: ‘province’,

// 这两行一般都会写上,并且和store里面的fileds对应,这里是数组数据源

// 还有种Store,一般都是后台返回的Json数据型,大致格式为:

var store = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
        url:''//访问的action
}),     
    reader: new Ext.data.JsonReader({
        root:'root'
}, [
        {name: 'id'},// name值需要和Json里面对应,或者mapping:'id'对应
        {name: 'name'}
    ])
});

//这里mode属性需要改成:‘remote’,加载远程数据

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册