Extjs4中combo的联动选择
在没有人指点的情况下,自学，然后找资料...怎么人生有时候就是这样的悲催。。。没有人的指导的日子，默默前行。今天我便于大家一同分享combo的联动选择，希望对大家有所帮助。
1.首先创建数据源
1 Ext.onReady(function(){ 2 3 //查询提醒的业务类型 4 var businessTypeStore = Ext.create('Ext.data.Store', { 5 singleton : true, 6 fields: [{type: 'id', name: 'id'},{type:'typeName',name:'typeName'}], 7 proxy: { 8 type: 'ajax', 9 url:'${ctx}/initWarnSet/getBusinessTypeList' 10 }, 11 autoLoad: true,//默认为自动加载 12 remoteSort:true 13 }); 14 15 //查询对应类型提醒业务的名称 16 var businessNameStore=Ext.create('Ext.data.Store',{ 17 singleton:true, 18 storeId:'businessNameStoreId', 19 fields:[{name:'fieldName',type:'fieldName'},{name:'fieldValue',type:'fieldValue'}], 20 proxy:{ 21 type:'ajax', 22 url:'${ctx}/initWarnSet/getBusinessNameList' 23 }, 24 extraParams:{ 25 26 }, 27 autoLoad:false,//默认不自动加载 28 remoteSort:true 29 }); 30 31 32 33 });
2.创建combo
1 var initWarnSetEditForm = Ext.create('Ext.form.Panel', { 2 id:'equinitWarnSetEditFormId', 3 border : false, 4 frame : false, 5 autoScroll:true, 6 style : 'padding-top: 5px', 7 bodyStyle : 'background-color:#FFFFFF', 8 fieldDefaults : { 9 labelAlign : 'right', 10 msgTarget : 'side', 11 labelWidth : 140 12 }, 13 defaultType: 'textfield', 14 15 items : [{ 16 xtype : 'hidden', 17 name : 'id' 18 },{ 19 xtype:'hidden', 20 name:'unitid', 21 value:'${code}' 22 },{ 23 name : 'businessName', 24 width : 600, 25 fieldLabel : '提醒名称', 26 maxLength : 25, 27 allowBlank : false 28 },{ 29 xtype : 'combo', 30 name : 'businessType', 31 width : 600, 32 fieldLabel : '业务类型', 33 allowBlank : false, 34 maxLength : 20, 35 displayField: "typeName", 36 valueField: "id", 37 queryMode: 'local', 38 selectOnFocus:true, 39 forceSelection: true, 40 editable: true, 41 triggerAction:'all', 42 emptyText:'请选择业务类型', 43 blankText : '请选择业务类型', 44 store:businessTypeStore, 45 listeners:{ 46 select:function(combo,records,options){ 47 var fieldName=Ext.getCmp('fieldNameId'); 48 fieldName.clearValue(); 49 fieldName.store.load({ 50 params:{ 51 typeId:this.value//注意,这里加载typeId到另外一个businessNameStore中 52 } 53 }); 54 55 //设置fieldNameId默认选中第一行的值 56 businessNameStore.on('load',function(store,record,opts){ 57 var firstValue = record[0].data.fieldValue; 58 var firstName=record[0].data.fieldName; 59 fieldName.setValue(firstValue); 60 filedName.setDisplayValue(firstName); 61 62 }); 63 } 64 } 65 },{ 66 xtype:'combo', 67 name : 'fieldValue', 68 id:'fieldNameId', 69 width : 600, 70 fieldLabel : '提醒的业务名称', 71 maxLength : 25, 72 //allowBlank : false, 73 displayField: "fieldName", 74 valueField: "fieldValue", 75 queryMode: 'local', 76 triggerAction:'all', 77 store:businessNameStore, 78 selectOnFocus:true, 79 forceSelection: true, 80 editable: true, 81 emptyText:'请选择提醒业务名称', 82 blankText:'请选择提醒业务名称' 83 },{ 84 xtype : 'hidden', 85 name : 'fieldName', 86 width : 600, 87 fieldLabel : '业务字段名称' 88 89 },{ 90 xtype : 'numberfield', 91 name : 'dayA', 92 width : 600, 93 //allowBlank : false, 94 fieldLabel : '提前提醒日期（天）', 95 minValue:0, 96 listeners: { 97 blur : function(th, e, obj) { 98 if(th.getValue()!=''&&th.getValue()!='null'&&th.getValue()!=null) 99 { 100 initWarnSetEditForm.getForm().findField('dayF').setValue(''); 101 } 102 } 103 } 104 },{ 105 xtype:'hidden', 106 name:'dayAdvance' 107 },{ 108 xtype : 'numberfield', 109 name : 'dayF',//dayAdvance 110 width : 600, 111 //allowBlank : false, 112 fieldLabel : '过后提醒日期（天）', 113 maxLength : 50, 114 minValue:0, 115 listeners: { 116 blur : function(th, e, obj) { 117 if(th.getValue()!=''&&th.getValue()!='null'&&th.getValue()!=null) 118 { 119 initWarnSetEditForm.getForm().findField('dayA').setValue(''); 120 } 121 } 122 } 123 },{ 124 xtype:'numberfield', 125 name:'afterDay', 126 width:600, 127 allowBlank:false, 128 fieldLabel:'过后截止提醒日期（天）', 129 minValue:1 130 131 },{ 132 xtype : 'combo', 133 name : 'frequency', 134 width : 600, 135 allowBlank:false, 136 fieldLabel : '提醒的频率', 137 displayField:'name', 138 valueField:'id', 139 queryMode:'local', 140 value:'1', 141 store: new Ext.data.SimpleStore({ 142 fields: ["name","id"], 143 data: [['天','1'],['周','2'],['月','3']] 144 }) 145 146 147 }] 148 }); 149 150 var initWarnSetWin = Ext.create('Ext.window.Window', { 151 title : '提醒设置', 152 height: 320, 153 width: 650, 154 modal:true, 155 resizable: true, 156 //closeAction :'remove', 157 layout:'fit', 158 items: initWarnSetEditForm, 159 buttonAlign: 'center', 160 bodyStyle:'background-color:#FFFFFF', 161 buttons : [{ 162 text:'确定', 163 scale: 'large', 164 iconCls:'icon_save_32', 165 type : 'submit', 166 handler : saveData 167 },{ 168 text:'返回', 169 scale: 'large', 170 iconCls:'icon_Developer_Icons_204', 171 handler:function(){ 172 initWarnSetWin.close(); 173 } 174 }] 175 }); 176 177 initWarnSetWin.show();
3.后台代码
1 /** 2 * 查看所有的业务提醒类型 3 * @param redirectAttributes 4 * @return 5 */ 6 @RequestMapping(value="getBusinessTypeList") 7 public @ResponseBody String getBusinessTypeList(RedirectAttributes redirectAttributes){ 8 9 List<Object> initWarnBusinessType=new ArrayList<Object>(); 10 Map<String, Object> initWarnBusinessTypeMap=null; 11 try { 12 13 StringBuffer sql=new StringBuffer(); 14 sql.append("select ibt.id,ibt.typeName "); 15 sql.append(" from InitBusinessType ibt where 1=1"); 16 List<Object[]> list=(List<Object[]>) entityService.find(sql.toString()); 17 18 19 if (list!=null && list.size()>0) { 20 21 for(int i=0;i<list.size();i++){ 22 initWarnBusinessTypeMap=new HashMap<String, Object>(); 23 Object[] objs=(Object[])list.get(i); 24 initWarnBusinessTypeMap=new HashMap<String, Object>(); 25 initWarnBusinessTypeMap.put("id", objs[0]); 26 initWarnBusinessTypeMap.put("typeName", objs[1]); 27 initWarnBusinessType.add(initWarnBusinessTypeMap); 28 } 29 30 } 31 32 JSONArray jsonArr=new JSONArray(initWarnBusinessType); 33 //System.out.println("json"+jsonArr); 34 return jsonArr.toString(); 35 36 } catch (Exception e) { 37 e.printStackTrace(); 38 } 39 40 return ""; 41 42 } 43
//注意看typeId 44 /**//注意看typeId 45 * 根据业务的类型,找到对应的提醒业务的名称 46 * @param typeId 47 * @param redirectAttributes 48 * @return 49 */ 50 @RequestMapping(value="getBusinessNameList") 51 public @ResponseBody String getBusinessNameList(@Valid @ModelAttribute("typeId") String typeId,RedirectAttributes redirectAttributes){ 52 List<Object> initBusinessName=new ArrayList<Object>(); 53 Map<String, Object> initBusinessNameMap=null; 54 try { 55 56 StringBuffer sql=new StringBuffer(); 57 sql.append("select ibn.fieldName,ibn.fieldValue,ibn.busId "); 58 sql.append(" from InitBusinessName ibn where 1=1"); 59 if(ParamUtil.notNull(typeId)){ 60 sql.append(" and ibn.busId=").append(typeId); 61 } 62 sql.append(" order by ibn.busId"); 63 List<Object[]> list=(List<Object[]>) entityService.find(sql.toString()); 64 if (list!=null && list.size()>0) { 65 66 for(int i=0;i<list.size();i++){ 67 initBusinessNameMap=new HashMap<String, Object>(); 68 Object[] objs=(Object[])list.get(i); 69 initBusinessNameMap=new HashMap<String, Object>(); 70 initBusinessNameMap.put("fieldName", objs[0]); 71 initBusinessNameMap.put("fieldValue", objs[1]); 72 initBusinessName.add(initBusinessNameMap); 73 } 74 75 } 76 JSONArray jsonArr=new JSONArray(initBusinessName); 77 //System.out.println("json"+jsonArr); 78 return jsonArr.toString(); 79 80 } catch (Exception e) { 81 e.printStackTrace(); 82 } 83 return ""; 84 }
4.效果如下：
选择不同的业务类型,就会有不同的提醒的业务名称。。。。
最后小编祝大家天天开心，工作愉快!
