Combobox
加載下拉框數據
點擊下拉框，數據從后台加載，是很常見的需求。如下圖：
View 中下拉框
dockedItems : [ {
dock : 'top',
xtype : 'toolbar',
items : [ {
xtype : 'combobox',
name : 'currYear',
fieldLabel : '年度',
labelAlign : 'right',
labelWidth : 30,
width : 100,
emptyText : '',
editable : false,
margin : '5 5 5 5',
displayField : 'year',// 顯示值，因 model 中有一個 year 屬性，所以數據返回到頁面上，將顯示值和真值，都設置為 year 字段值
valueField : 'year',// 真值
store : 'jsxm.yearStore',
}
]
Store
Ext.define('MyApp.store.jsxm.yearStore', {
extend : 'Ext.data.Store',
model : 'MyApp.model.jsxm.yearModel',
proxy : {
type : 'ajax',
url : 'jsxmAction!getYears',
reader : {
type : 'json',
root : 'years'// {"years":[{"year":"全部"},{"year":"2017"},{"year":"2016"},{"year":"2015"}]}
}
},
autoLoad : false
});
Model
Ext.define('MyApp.model.jsxm.yearModel', {
extend : 'Ext.data.Model',
fields : [ {
name : 'year',
type : 'string'
} ]
});
后台方法
public void getYears() {
QueryDataSource qds = new QueryDataSource();// 公司接口
try {
// 公司接口，查詢表中 noyear 字段的值
ArrayList<String> yearList = qds.queryObjectProperty("cg_jsxm_hp", "noyear", true, "1=1 order by noyear desc");
System.out.println(yearList);// [2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008]
ArrayList<HashMap> list = new ArrayList<HashMap>();
HashMap<String, String> map = new HashMap<String, String>();
map.put("year", "全部");
list.add(map);// 第一個 map 放進 list 中，[{year=全部}]
for (String year : yearList) {
HashMap<String, String> hashMap = new HashMap<String, String>();
hashMap.put("year", year);
list.add(map);
}
JSONArray jsonArray = JSONArray.fromObject(list);
String data = "{\"years\":" + jsonArray.toString() + "}";// 組裝 json 數據，store 中有 reader: {type: 'json', root: 'years'}，root 要對應起來
System.out.println(data);// {"years":[{"year":"全部"},{"year":"2017"},{"year":"2016"},{"year":"2015"}]}
send(data);// 封裝的方法 public void send(String s){ServletActionContext.getResponse().getWriter().write(s)};
} catch (Exception e) {
e.printStackTrace();
}
}
封裝的 send 方法
public void send(String s) {
try {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(s);
} catch (Exception e) {
e.printStackTrace();
}
}
執行方法后，返回數據：
級聯下拉框
Ext.define('MyApp.view.hdjg.hzzhdView', {
extend : 'Ext.grid.Panel',
alias : 'widget.hzzhdView',
id : 'hzzhdView',
layout : 'fit',
simpleSelect : false,
store : 'hdjg.hzzhdStore',
autoScroll : true,
initComponent : function(){
Ext.define('hdmcModel', {
extend : 'Ext.data.Model',
fields : [ {
type : 'String',
name : 'text'
}, {
type : 'String',
name : 'value'
} ]
});
// hdmcStore 作為 hdmc 下拉框的 Store
var hdmcStore = Ext.create('Ext.data.Store', {
model : 'hdmcModel',
listeners : {
'beforeload' : function() {
var grid = Ext.getCmp('hzzhdView');
var tableName = 'hzz_hdydjcxx';// 實際項目里，兩處（查詢的表不同）用到 proxy 下的方法，所以，這里將需要查詢的表，也作為參數傳遞進去。
if (grid) {
Ext.apply(this.proxy.extraParams, {
// 取參數
xsqmc : grid.down('combobox[name="xsqmc"]').getValue(),
tableName : tableName
});
}
}
},
proxy : {
type : 'ajax',
url : 'hdjgAction!getHdmcByXsqmc'// 級聯
// 此處沒有 reader 配置，無所謂，后台數據直接傳一個數組即可，這里有 reader 配置的話，后台組裝下 json 字符串即可，很簡單。
},
autoLoad : true
});
this.columns = [];// 此處代碼省略
// 停靠組件部分> 搜索條件工具欄
this.dockedItems = [ {
dock : 'top',
xtype : 'toolbar',
autoShow : true,
enableOverflow : true,
layout : {
overflowHandler : 'Menu'// items太多溢出處理
},
items : [ {
xtype : 'combobox',
name : 'xsqmc',
fieldLabel : '縣區市',
labelAlign : 'right',
labelWidth : 40,
width : 180,
editable : false,
emptyText : '<縣區市名稱>',
store : [ '全部', '市級', '海曙區', '江北區', '鎮海區', '北侖區', '鄞州區',
'奉化區', '余姚市', '慈溪市', '寧海縣', '象山縣', '杭州灣新區',
'大榭開發區', '高新區', '東錢湖旅游度假區', '典型示范河道' ],
listeners : {
// 監聽 combobox 的 select 事件，在函數里執行加載 需要級聯的 combobox 的操作
'select' : function(combo, record, index) {
var relativeCombo = Ext.getCmp("hdmcStoreId");
relativeCombo.value = "";// 加載之前把，下拉框值設為 ''，則會先顯示 hdmcStore 的 emptyText，加載完成后，顯示完整 combobox 數據
relativeCombo.store.load();
}
}
}, {
xtype : 'combobox',
id : 'hdmcStoreId',// 當前下拉框組件'id'
store : hdmcStore,
name : 'hdmc',
fieldLabel : '河道名稱',
labelWidth : 60,
width : 280,
displayField : 'text',
valueField : 'value',
emptyText : '請選擇<河道名稱>',
editable : false
} ]
} ];
this.callParent(arguments);
}
});
public void getHdmcByXsqmc() {
String type = this.tableName;
ArrayList<TextAndValue> list = new ArrayList<TextAndValue>();
TextAndValue temp = new TextAndValue();// 就是一實體類，屬性 text、value、getter && setter方法
temp.setText("全部");
temp.setValue("");
list.add(temp);
if (xsqmc != null && !"".equals(xsqmc)) {
try {
QueryDataSource qds = new QueryDataSource();
String sql = "select distinct hdmc from "+ type +" where 1=1 and xsqmc = '" + xsqmc + "'";
ArrayList<HashMap<Object, Object>> arrayList = qds.queryDBSQL(sql);
System.out.println(arrayList);// [{HDMC=梅梁橋河}, {HDMC=槐路河}, {HDMC=黃家門前河}, {HDMC=姚江(蜀山大閘-城山渡渡口)}, {}, {}...]
for(HashMap<Object, Object> map: arrayList){
TextAndValue textAndValue = new TextAndValue();
textAndValue.setText(map.get("HDMC").toString());
textAndValue.setValue(map.get("HDMC").toString());
list.add(textAndValue);
}
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
}
String data = JSONArray.fromObject(list).toString();// [{"text":"全部","value":""},{"text":"梅梁橋河","value":"梅梁橋河"}, {}, {}...]
send(data);// 將 list 轉為 json 字符串對象，然后直接返回到客戶端
}
// 如果 store 的 proxy 配置里，有 reader 配置的話，則組裝下 json 即可，沒有配置 reader 的話，直接返回數組也是可以的。
reader: {
type: 'json',
root: 'riverName'
}
String data = "{\"riverName\":" + JSONArray.fromObject(list).toString() + "}";
send(data);// {"riverName": [{"text":"全部","value":""},{"text":"梅梁橋河","value":"梅梁橋河"}, {}, {}...]}
頁面效果：
點擊 縣區市 下拉框后，發現，河道名稱 下拉框發生了變化，級聯操作，沒毛病。
