首页 > extjs级联问题

extjs级联问题

做的是二级级联。本地数据(数组形式)

在父节点 中 listeners 属性中,用的是 select 子属性。

现在能首次级联成功,级点击父节点,子节点会出来数据;但是再第二次点击父节点时,子节点数据依旧是上次的数据,没有改变过来。

父级 listeners 监听事件代码。

   listeners: {  
    select: function(combo, record, index){   
       secondstore.loadData(second_array[record[0].data.first_arrayId]);
}

查看api, 以为这个 lastQuery 还蛮有点用的,但对于本地数据,测试发现不是那么好用吶,目前还是不清楚怎么解决,各位有什么好的注意?


在测试中发现,select 属性只会触发一次,选择一次后就决定了,不能被改变,这个怎么绕过它啊


修改三:代码

Ext.application({
name   : 'MyApp',
launch : function() {
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [
                { text: "用户管理维护", expanded: true, children: [
                    { text: "系统用户管理维护", leaf: true },
                    { text: "会员管理维护", leaf: true}
                ] },
                { text: "产品管理维护", expanded: true, children:[
                    {text: "产品浏览", leaf: true},
                    {text: "产品挂牌", leaf: true},
                ] }
            ]
        }
    });

    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items:[{ 
            region: 'north',
            xtype: 'component',
            padding: 10,
            height: 40,
            html: '------测试 - 业务管理系统'
        },{
            xtype: 'panel',
            title: 'Navigation',
            region: 'west',
            width: 250,
            split: true,
            layout: 'fit',
            collapsible: true,
            items:[{
                xtype: 'treepanel',
                store: store,
                rootVisible: false,
                listeners:{
                     itemclick: {
                            fn: function(s,r){ 
                                if(r.data.leaf){
                                    addtab(r.data.id,r.data.text);
                                }
                            }
                        },
                }
            }]
        },{
            region: 'center',
            xtype: 'tabpanel',
            id: 'MainTabPanel',
            items:[{
                title: 'Tab 1',
                bodyPadding: 20,
                html: '<h2>Content...</h2>'
            }]
        }]
        });
    }
});


//增加tabpanel函数
function addtab(id, name){
    var tabId = "tab-"+id; 
    var tabTitle = "mugbya" + name; 
    var centerpanel = Ext.getCmp('MainTabPanel');
    var tab = centerpanel.getComponent(tabId);

    if (!tab) {
        tab = centerpanel.add(new Ext.Panel({
            id : tabId,
            title : tabTitle,
            autoScroll : true,

            border : false,

            closable : true,
            layout:'hbox',
            items:[product]
     }));
        centerpanel.setActiveTab(tab);
    } else{ // 如果MainTabPanel,那么就直接将节点指向这个页面
        centerpanel.setActiveTab(tab);
    };
}

//定义级联关系数组
var first_array = [[1,'发行期为零'],[2,'固定发行期'],[3,'固定发行期']];
var second_array = new Array();
second_array[1] = [[11,'一口价'],[12,'面议']];
second_array[2] = [[21,'一对多'],[22,'一对一']];
second_array[3] = [[31,'我们'],[32,'他们']];


// 小面板放在父面板前面
 var combo_1 = new Ext.form.ComboBox({
    store : new Ext.data.SimpleStore({
        fields : ["first_arrayId","first_arrayName"],
        data : first_array
    }),
    listeners : {
        select : function(combo, record, index){
           console.log(combo.value + "--- " + record[0].data.first_arrayId);
           console.log(record[0].data);     
           combo_2.clearValue();
           combo_2.store.loadData(second_array[record[0].data.first_arrayId]);       
        }
    },
    queryMode:'local',
    fieldLabel:'发行期选择',
    valueField:'first_arrayeId',
    displayField:'first_arrayName',
    hiddenName:'first_arrayId',
    forceSelection : true,
    name:'first_arrayId',
    triggerAction : 'all',
    anchor:"80%",
    editable : false
 });


 var combo_2 = new Ext.form.ComboBox({
    store : new Ext.data.SimpleStore({
       fields : ["secondstoreId","secondstoreName"],
       data : []
      }),
    queryMode:'local',
    fieldLabel:'交易方式选择',
    valueField: 'secondstoreId',
    displayField:'secondstoreName',
    hiddenName:'secondstoreId',
    name:'secondstoreId',
    anchor:"80%",
    editable : false,
    forceSelection : true,
    triggerAction: 'all'
 });


//增加表单面板 
var product = new Ext.form.Panel({
    title : '<span >本地数据</span>',
    xtype: 'form-combos',
    width: 500,
    layout: 'form',
    defaultType: 'fieldset',
    // frame : true,
    bodyStyle : 'padding:5 5 0',
    defaults : {
        'margin-bottom': '20px',
        defaultType: 'combobox',
        layout: 'anchor',
        labelSeparator : ': ',
        labelWidth : 100,
        width : 330,
        allowBlank : false, //允许为空
        labelAlign : 'left'
    },
    items : [combo_1,combo_2]    
});

你应该监听 ComboBoxchange 事件。

【热门文章】
【热门文章】