Ext combobox 级联 Ext 动态数据更新 Ext combobox 动态更新

   这几天做一个需求,大概如下,有5长表(A,B,C,D,E) ,A-B 一对多,B-C 一对多,以此类推。

   现在要求是A中选择一个或多个选项,B的数据就根据A的选择动态更新,选择完B后C的选项就动态更新,以此类推。

   听起来也不难,如果是传统的方式就可以通过每次选择一个选项后请求后台,刷新页面来实现。

   但是,如果用这种方式实现,用户体验不好,幸亏我们现在有了AJax技术,可以实现无刷新页面,用户体验大增。

   本文通过Ext+dwr 来实现该更能,dwr的细节代码就不贴了,自己也能写出来。有需要的就联系我。

   设计思路大概是这样,

   在A中选择某几个项,这时什么动作也没有,点击B的下拉框时,通过A的以选中的项,请求dwr并获得数据,

并给B的下拉框填充数据。这里有个小问题,如果已经选择好了C的选项,这时用户修改了A的选项,这时C的选项可能不正确

,所以A的选项被修改时需要把BCD…的选项清除掉,等用户点击下拉框时再从后台提取数据。

   另一种设计思路是:

   在A中选择某几个项,选完之后失去几点时,即blur时更新B的数据,B、C 以此类推,但是Ext里没有实现成功。

   贴代码前需要几个地方声明:

   ReportAction 这个是通过dwr转换过的前台js类,通过这个类提取数据。

   

   ==========================================================================================

   下面贴Ext代码:

CascadeComboBox = function(config){

var panel=this;//供处理事件的时候使用

var _specialtyData =[];

var _productData =[['all','请先选择专业']];

var _subProductData =[['all','请先选择产品']];

var _modelData =[['all','请先选择子产品']];

var _programData =[['all','请先选择模块']];

var _configData =[['all','请先选择程序']];

ReportAction.getSpecialtyList(function(data){

_specialtyData = data;

});

this._specialtyCombo = new Ext.ux.form.LovCombo({

store : new Ext.data.SimpleStore({

data : _specialtyData,

fields : [

{name : 'cuid',mapping :0},

{name : 'name',mapping :1}

]

}),

fieldLabel : ‘专业’,

        loadingText: ‘loading…’,

        displayField : ‘name’,

        mode:’local’,

        editable : true,

        valueField: ‘cuid’,

        triggerAction: ‘all’

});

this._specialtyCombo.on(‘select’,function(combo,rec,index){

//如果修改选项则把下面的下拉框都清除掉

panel._productCombo.clearValue();

panel._subProductCombo.clearValue();

panel._modelCombo.clearValue();

panel._programCombo.clearValue();

panel._configCombo.clearValue();

});

this._productCombo = new Ext.ux.form.LovCombo({

store : new Ext.data.SimpleStore({

data : _productData,

fields : [

{name : 'cuid',mapping :0},

{name : 'name',mapping :1}

]

}),

id:’product’,

fieldLabel : ‘产品’,

        loadingText: ‘loading…’,

        displayField : ‘name’,

        mode:’local’,

        editable : true,

        valueField: ‘cuid’,

        triggerAction: ‘all’

});

this._productCombo.on(‘expand’,function(combo){

//监听expand事件,也就是下拉框

if(combo.getValue().length>0)

return ;

ReportAction.getProductBySpecialty(panel._specialtyCombo.getValue(),function(data){

//倒入数据,并把数据填充到下一级的下拉框

panel._productCombo.store.loadData (data,false);

});

});

this._productCombo.on(‘select’,function(combo,rec,index){

panel._subProductCombo.clearValue();

panel._modelCombo.clearValue();

panel._programCombo.clearValue();

panel._configCombo.clearValue();

});

this._subProductCombo = new Ext.ux.form.LovCombo({

store : new Ext.data.SimpleStore({

data : _subProductData,

fields : [

{name : 'cuid',mapping :0},

{name : 'name',mapping :1}

]

}),

fieldLabel : ‘子产品’,

        loadingText: ‘loading…’,

        displayField : ‘name’,

        mode:’local’,

        editable : true,

        valueField: ‘cuid’,

        triggerAction: ‘all’

});

this._subProductCombo.on(‘expand’,function(combo){

if(combo.getValue().length>0)

return ;

ReportAction.getSubProductByProduct(panel._productCombo.getValue(),function(data){

panel._subProductCombo.store.loadData (data,false);

});

});

this._subProductCombo.on(‘select’,function(combo,rec,index){

panel._modelCombo.clearValue();

panel._programCombo.clearValue();

panel._configCombo.clearValue();

});

this._modelCombo = new Ext.ux.form.LovCombo({

store : new Ext.data.SimpleStore({

data : _modelData,

fields : [

{name : 'cuid',mapping :0},

{name : 'name',mapping :1}

]

}),

fieldLabel : ‘模块’,

        loadingText: ‘loading…’,

        displayField : ‘name’,

        mode:’local’,

        editable : true,

        valueField: ‘cuid’,

        triggerAction: ‘all’

});

this._modelCombo.on(‘expand’,function(combo){

if(combo.getValue().length>0)

return ;

ReportAction.getModelBySubProduct(panel._subProductCombo.getValue(),function(data){

panel._modelCombo.store.loadData (data,false);

});

});

this._modelCombo.on(‘select’,function(combo,rec,index){

panel._programCombo.clearValue();

panel._configCombo.clearValue();

});

this._programCombo = new Ext.ux.form.LovCombo({

store : new Ext.data.SimpleStore({

data : _programData,

fields : [

{name : 'cuid',mapping :0},

{name : 'name',mapping :1}

]

}),

fieldLabel : ‘程序’,

        loadingText: ‘loading…’,

        displayField : ‘name’,

        mode:’local’,

        editable : true,

        valueField: ‘cuid’,

        triggerAction: ‘all’

});

this._programCombo.on(‘expand’,function(combo){

if(combo.getValue().length>0)

return ;

ReportAction.getProgramByModel(panel._modelCombo.getValue(),function(data){

panel._programCombo.store.loadData (data,false);

});

});

this._programCombo.on(‘select’,function(combo,rec,index){

panel._configCombo.clearValue();

});

this._configCombo = new Ext.ux.form.LovCombo({

store : new Ext.data.SimpleStore({

data : _configData,

fields : [

{name : 'cuid',mapping :0},

{name : 'name',mapping :1}

]

}),

fieldLabel : ‘配置项’,

        loadingText: ‘loading…’,

        displayField : ‘name’,

        mode:’local’,

        editable : true,

        valueField: ‘cuid’,

        triggerAction: ‘all’

});

this._configCombo.on(‘expand’,function(combo){

if(combo.getValue().length>0)

return ;

ReportAction.getConfigItemByProgram(panel._programCombo.getValue(),function(data){

panel._configCombo.store.loadData (data,false);

});

});

DRM.BusiDataFieldPanel.superclass.constructor.call(this,Ext.apply(config,{

layout : ‘form’,

frame : true,

items : [this._specialtyCombo,this._productCombo,this._subProductCombo,this._modelCombo,this._programCombo,this._configCombo]

}));

};

Ext.extend(CascadeComboBox,Ext.Panel);

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>