extjs与后台交互

<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>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值