码迷,mamicode.com
首页 > 其他好文 > 详细

EXT学习之——Ext下拉框绑定以及级联写法

时间:2016-11-16 13:47:32      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:apply   tab   tde   lis   xxxx   combox   new   pac   module   

/*******步骤有四个,缺一不可*********/


function () {xxxxxx = Ext.extend(construct, {InitControl: function () { var _this = this; /*****************步骤一:建数据store ******************/ //一级下拉框数据(此处注意,一定要把store写在combobox控件定义的前面,否则无法加载数据)
          var moduleStore = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({
type: ‘ajax‘, url: ‘/xx//Getxx?c=‘ + (new Date()).toString(),
extraParams: { dept_Id: comboboxOutdept.getValue() }, reader: { root: ‘Rows‘, totalProperty: ‘Total‘, type: ‘json‘ } }), autoLoad: true, fields: [‘ID‘, ‘NAME‘,‘CODE‘] //后台返回的字段名 });
/***********步骤二:建combobox对象并绑定store  ********/
            //一级下拉框绑定数据
            var moduleCombo = new Ext.form.field.ComboBox({
                fieldLabel: "申请医院",
                columnWidth: .271,  //调整下拉框宽度
                labelAlign: ‘right‘,
                labelWidth: 60,
                id: this.namespace + ‘_orgNameCombo‘,
                store: moduleStore,   //绑定数据store
                editable: false,
                displayField: "NAME",
                valueField: "ID",
                emptyText: "--请选择医院--",
                queryMode: "local",
                style: ‘padding-top:20px;margin-left:30px;‘,               
                listeners: {
                    ‘select‘: function () {
//级联下拉框 comboboxdept.setValue(‘‘); deptStore.load({ url: ‘/xx/GetDepts?c=‘ +
(new Date()).toString() + ‘&orgId=‘ + moduleCombo.getValue() }); } } }); //二级下拉框数据 var deptStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ type: ‘ajax‘, url: ‘/xx/GetDepts?c=‘ + (new Date()).toString(), reader: { root: ‘Rows‘, totalProperty: ‘Total‘, type: ‘json‘ } }), fields: [‘ID‘, ‘CODE‘, ‘NAME‘] }); //二级下拉框绑定数据 var comboboxdept = new Ext.form.ComboBox({ xtype: "combobox", name: "Gender", fieldLabel: "申请科室", columnWidth: .271, //调整下拉框宽度 labelAlign: ‘right‘, labelWidth: 60, id: this.namespace + ‘_deptCombo‘, store: deptStore, //绑定数据store editable: false, displayField: "NAME", valueField: "CODE", emptyText: "--请选择科室--", queryMode: "local", style: ‘padding-top:20px;margin-left:30px;‘ });

//接上面同级

/**********步骤三:创建panel并将combobox控件绑定到界面****************/

this.bodyPanel = new Ext.Panel({
layout: ‘border‘,
bodyStyle: ‘padding:1px;‘,
defaults: { minHeight: 25, style: ‘padding-top:1px;‘ },
items: [
{

xtype: ‘panel‘, layout: ‘column‘, style: ‘padding-left:2px;‘,

   columnWidth: 1, region: ‘center‘, items: [
{
xtype: ‘panel‘, layout: ‘column‘, style: ‘padding-left:2px;‘,

     id: this.namespace + ‘_downLoadReferralRecord_first‘, columnWidth: 1, items: [
{

xtype: ‘textfield‘, fieldLabel: ‘身份证号‘, labelWidth: 65, id: this.namespace + ‘_idno‘,
height: 25, emptyText: ‘请输入身份证号‘, labelAlign: ‘right‘, columnWidth: .3, style: ‘padding-top:10px;‘
},

//或者直接扔combox进去

moduleCombo ,
comboboxdept

//换行写法,该写法会换行

{ xtype: ‘label‘, columnWidth: .5, text: ‘‘ },
{ xtype: ‘label‘, columnWidth: 1, height: 0, text: ‘‘, style: ‘font-size:2px;‘ }

]},

。。。

/***********步骤四:触发store数据加载  *****************/

在 panel下的params,隔壁加个监听事件

],
listeners: {
render: function () {
//加载时的遮罩层
_this.mask = new Ext.LoadMask(_this.bodyPanel.getEl(), ‘数据交互中...‘);
_this.moduleStore.load();
_this.deptStore.load();
}
}

/**********步骤四:赋值store数据  ************/

在InitControl最后一个项加

Ext.apply(this, {
grid: grid, //列表对象
store: store,
moduleStore: moduleStore,  //不加的话会导致数据不会到后台去读取
deptStore: deptStore
});
}

,

 




  

EXT学习之——Ext下拉框绑定以及级联写法

标签:apply   tab   tde   lis   xxxx   combox   new   pac   module   

原文地址:http://www.cnblogs.com/wdw31210/p/6068767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!