<script type="text/javascript">
Ext.onReady(function()
{
Ext.define('model',{
extend:'Ext.data.Model',
fields:[{name:'id',mapping:'id',type:'int'},
{name:'name',mapping:'name',type:'string'}
]
});
var storeSheng = Ext.create(
'Ext.data.Store',
{
model:'model',
proxy:{
type:'ajax',
url:'city_sheng',
reader:{
type:'json',
root:'sheng'
}
},
autoLoad:true,
remoteSort:true
}
);
var storeShi = Ext.create(
'Ext.data.Store',
{
model:'model',
proxy:{
type:'ajax',
url:'city_shi',
reader:{
type:'json',
root:'shi'
}
},
autoLoad: false,
remoteSort:true
}
);
Ext.create('Ext.panel.Panel',{
width:300,
height:200,
renderTo:Ext.getBody(),
items:[{
xtype:'combo',
name:'sheng',
id:'sheng',
fieldLabel:'sheng',
displayField:'name',
valueField:'id',
store:storeSheng,
triggerAction:'all',
queryMode:'local',
allowBlank:false,
editable:true,
listeners:{
select:function(combo,record,index)
{
try{
var shi=Ext.getCmp('shi');
shi.clearValue();
shi.store.load({
params:{paramId:combo.getValue()}
});
}catch(ex)
{
alert("数据加载失败!");
}
}
}
},
{
xtype:"combo",
name:'shi',
id:'shi',
fieldLabel:'选择市',
displayField:'name',
valueField:'id',
store:storeShi,
triggerAction:'all',
queryMode:'local'
}]
});
});
</script>
extjs做界面还是很好的,但是涉及到与后台交互的时候也很麻烦,最近在看extjs,现在把一些写出来。主要是与struts2交互json数据
js代码:
action类
package action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import org.apache.struts2.ServletActionContext;
import model.city;
import com.opensymphony.xwork2.ActionSupport;
public class cityaction extends ActionSupport{
private String paramId;
public String getParamId() {
return paramId;
}
public void setParamId(String paramId) {
this.paramId = paramId;
}
public List<city> getSheng() {
return sheng;
}
public void setSheng(List<city> sheng) {
this.sheng = sheng;
}
public List<city> getShi() {
return shi;
}
public void setShi(List<city> shi) {
this.shi = shi;
}
private List<city> sheng;
private List<city> shi;
public String sheng()
{
city c1=new city();
c1.id=100;
c1.name="beijing";
city c2=new city();
c2.setId(200);
c2.setName("shangdong");
sheng=new ArrayList<city>();
sheng.add(c1);
sheng.add(c2);
return SUCCESS;
}
public String shi()
{
if(paramId.equals("100"))
{
city c1=new city();
c1.id=1200;
c1.name="beijing";
city c2=new city();
c2.setId(2200);
c2.setName("shangdong");
shi=new ArrayList<city>();
shi.add(c2);
shi.add(c1);
}else
{
city c1=new city();
c1.id=1100;
c1.name="bing";
city c2=new city();
c2.setId(2100);
c2.setName("sdong");
shi=new ArrayList<city>();
shi.add(c1);
shi.add(c2);
}
return SUCCESS;
}
}
struts.xml
<package name="default" extends="json-default">
<action name="city_sheng" class="action.cityaction" method="sheng">
<result type="json" name="success">
</result>
</action>
<action name="city_shi" class="action.cityaction" method="shi">
<result type="json" name="success">
</result>
</action>
</package>