extjs 下拉框 多级联动
下拉框所在面板,这边有有个框子的规则和正则表达式匹配,效果图如下
代码如下:
- var addOfficerField = Ext.create("Ext.form.FieldSet", {
- height : 420,
- width : 350,
- border:false,
- layout : "column",
- // region: "north",
- items : [{
- xtype:'textfield',
- columnWidth :1,
- fieldLabel : '姓名<span style="color:red">*</span>',
- margin : '10 20 10 0',
- labelAlign:"right",
- blankText: '姓名不能为空',
- maxLength : 20,
- maxLengthText : '姓名长度不得大于20个字符长度',
- allowBlank: false,
- id:'addnameId',
- },{
- xtype:'textfield',
- columnWidth :1,
- fieldLabel : '出生日期<span style="color:red">*</span>',
- margin : '10 20 10 0',
- labelAlign:"right",
- blankText: '出生日期不能为空',
- allowBlank: false,
- id:'addbirthId',
- },{
- xtype:'textfield',
- columnWidth :1,
- fieldLabel : '电话<span style="color:red">*</span>',
- margin : '10 20 10 0',
- labelAlign:"right",
- blankText: '电话不能为空',
- regex: /^(\d3,4|\d{3,4}-|\s)?\d{7,14}$/ ,
- regexText: '电话号码格式不正确',
- allowBlank: false,
- id:'addphoneId',
- },{
- xtype:'textfield',
- columnWidth :1,
- fieldLabel : '身份证<span style="color:red">*</span>',
- margin : '10 20 10 0',
- labelAlign:"right",
- blankText: '身份证不能为空',
- regex: /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/,
- regexText: '身份证号码格式不正确',
- allowBlank: false,
- id:'addcardId',
- },{
- xtype:'textfield',
- columnWidth :1,
- fieldLabel : '邮箱<span style="color:red">*</span>',
- margin : '10 20 10 0',
- labelAlign:"right",
- blankText: '邮箱不能为空',
- regex: /^(\w-*\.*)[email protected](\w-?)+(\.\w{2,})+$/,
- regexText: '邮箱格式不正确',
- allowBlank: false,
- id:'addemailId',
- },{
- xtype:'textfield',
- columnWidth :1,
- fieldLabel : '供应商id<span style="color:red">*</span>',
- margin : '10 20 10 0',
- labelAlign:"right",
- blankText: '供应商id不能为空',
- allowBlank: false,
- id:'addsupplierId'
- },{
- xtype:'textfield',
- columnWidth :1,
- fieldLabel : '组织构架id<span style="color:red">*</span>',
- margin : '10 20 10 0',
- labelAlign:"right",
- blankText: '组织构架id不能为空',
- allowBlank: false,
- id:'addorganizationId'
- },{
- xtype:'combobox',
- editable: false,
- margin : '10 20 10 0',
- columnWidth :1,
- fieldLabel : '主站id<span style="color:red">*</span>',
- labelAlign:"right",
- store: mainStationStore,
- listeners: {
- select : function(combo, record, index){
- //这边是下拉联动的代码,点击这个下拉框加载下面一个下拉框的数据,这边可以用store.load(),
- //或者ajax获取数据
- stationStore.load({
- //Ext.Ajax.request({
- url: "findStation.action",
- // async: false,
- params: {
- 'station.mainstationid': combo.value
- },
- // success : function(response, options) {
- // stationStore.load()
- // },
- });
- //var msg = mainStationGrid.getSelectModel().getSelection();
- // var id = msg[0].data.id;
- // stationStore.proxy.extraParams['mainstationid'] = id;
- // stationStore.load();
- }
- },
- triggerAction: 'all',
- displayField: "name",
- valueField: "id",
- blankText: '主站id不能为空',
- allowBlank: false,
- //mode: 'local',
- //vtype:'typeVtype',
- emptyText: "--必选,请选择--",
- id:'addmainStationId'
- },{
- xtype:'combobox',
- editable: false,
- margin : '10 20 10 0',
- columnWidth :1,
- fieldLabel : '厂站id',
- labelAlign:"right",
- store: stationStore,
- listeners: {
- select : function(combo, record, index){
- mainstationid = stationStore.data.items[0].data.mainstationid
- applicationStore.load({
- url: "findApplication.action",
- params: {
- 'application.mainstationid': mainstationid,
- 'application.stationid': combo.value
- },
- });
- //var mainstationid = stationStore.data.items[0].data.mainstationid
- //applicationStore.proxy.extraParams['mainstationid'] = mainstationid;
- //applicationStore.proxy.extraParams['stationid'] = combo.value;
- //applicationStore.load();
- }
- },
- triggerAction: 'all',
- displayField: "name",
- valueField: "id",
- //allowBlank: false,
- //mode: 'local',
- //vtype:'typeVtype',
- emptyText: "--可选,请选择--",
- id:'addstationId'
- },{
- xtype:'combobox',
- editable: false,
- margin : '10 20 10 0',
- columnWidth :1,
- fieldLabel : '应用id',
- labelAlign:"right",
- store: applicationStore,
- triggerAction: 'all',
- displayField: "name",
- valueField: "id",
- //blankText: '应用id不能为空',
- //allowBlank: false,
- //mode: 'local',
- //vtype:'typeVtype',
- emptyText: "--可选,请选择--",
- id:'addapplicationId'
- }]
- });