<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
xmlns:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax"
renderKitId="AJAX">
<w:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
<!--
/*
根据jsonObje, 更换相关combo的store
*/
function changeStore(comboJsvar, jsonObj){
//捕获分析jsonObj
//构造store
//加载数据 ;
var newdata = [];
for (var ind = 0; ind < jsonObj.length ; ind ++ ){
var obj = jsonObj[ind];
var record = [obj.value, obj.text];
//这里建立键值对
window.comboliandong.cachedText[comboJsvar.id+'_'+obj.value] = obj.text;
newdata.push(record);
}
var newstore = new Ext.data.SimpleStore({
fields:['value','text'],
data:newdata
});
comboJsvar.bindStore(newstore);
comboJsvar.fireEvent('load');
}
/*
省份的combo被选择了之后
*/
function provinceComboSelected(inputjson){
var citis = eval('(' + inputjson + ')').city;
changeStore(cityJsvar, citis);
}
/*
市的combo被选择了之后
*/
function cityComboSelected(inputjson){
var areas = eval('(' + inputjson + ')').area;
changeStore(areaJsvar, areas);
}
/*
清空相关combo.可用可不用，目前这里没用到该方法。
*/
function nullEveryCombo(){
changeStore(cityJsvar, "");
changeStore(areaJsvar, "");
}
function comboRenderer(v,m,r,row,col,s){
if ( !gridJsvar.getColumnModel() || !gridJsvar.getColumnModel().getCellEditor(col,row)){
return v;
}
//取到当前列的combo编辑器(唯一的)，并以之为key去全局键值对中取text
var currentEditor = gridJsvar.getColumnModel().getCellEditor(col,row).field;
var text = window.comboliandong.cachedText[currentEditor.id+'_'+v];
if (text){
return text;
}
return v;
}
//-->
</script>
</w:head>
<w:page title="省市联动">
<w:form>
<w:editDataGrid id="editdatagrid" jsvar="gridJsvar" width="500" height="500" clicksToEdit="1" >
<w:pagingToolbar>
<w:button id="add"/>
<w:button id="del"/>
<w:button id="refresh"/>
</w:pagingToolbar>
<w:outputColumn id="id" hidden="true" />
<w:outputColumn id="province" header="省份" width="150" clientFormatter="comboRenderer" >
<w:combo id="provinceCombo" jsvar="provinceJsvar" emptyText="请选择省份" >
<f:selectItems id="provinceList"/>
</w:combo>
</w:outputColumn>
<w:outputColumn id="city" header="市" width="150" clientFormatter="comboRenderer" >
<w:combo id="cityCombo" jsvar="cityJsvar">
</w:combo>
</w:outputColumn>
<w:outputColumn id="area" header="区" width="150" clientFormatter="comboRenderer" >
<w:combo id="areaCombo" jsvar="areaJsvar">
</w:combo>
</w:outputColumn>
</w:editDataGrid>
</w:form>
<w:form>
<ajax:submitAction jsvar="submitaction" action="#{datagrid.shengshiliandongBean.queryComboStore}" />
</w:form>
</w:page>
<script type="text/javascript">
<!--
Ext.onReady(function(){
window.comboliandong = {};
window.comboliandong.cachedText = {};
Ext.override(Ext.form.ComboBox, {
setValue : function(v){
var text = v;
if(this.valueField){
var r = this.findRecord(this.valueField, v);
if(r){
text = r.data[this.displayField];
}else if (window.comboliandong.cachedText[this.id+'_'+v]) {
text = window.comboliandong.cachedText[this.id+'_'+v];
}else if(this.valueNotFoundText !== undefined){
text = this.valueNotFoundText;
}
}
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
}
});
gridJsvar.on('afteredit',function(e){
var ind = e.column;
