Ext 的GridPanel 与Struts2.0的交互显示

最近用Ext做一个小程序，在用到GridPanel的时候遇到了一些问题，但最后都解决了

，得到了很多，写下来与大家分享。

首先，要在界面显示层用GridPanel来显示数据，具体代码如下：

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" 

/> 
  <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> 
  <script type="text/javascript" src="extjs/ext-all.js"></script> 
<script type="text/javascript">
Ext.onReady(function(){
	  Ext.QuickTips.init();
	var sm = new Ext.grid.CheckboxSelectionModel();
	
	var cm = new Ext.grid.ColumnModel([
	             sm,      				
	            {header:'NO.',renderer:function(value, cellmeta, record, rowIndex){
	                   return rowIndex + 1;
	             }},	                      	                               	
	            {header:'品牌',dataIndex:'name',sortable:true},
	            {header:'型号',dataIndex:'size',sortable:true},
	            {header:'价格',dataIndex:'price',sortable:true}
	           
	            ]);


	
	var ds = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({url:'softMachineInit.action'}),
		reader: new Ext.data.JsonReader({
		    totalProperty: 'totalProperty',
		    root: 'list'},//注意list，totalProperty在相应的action类中得有
                                  //get，set方法。
		    Ext.data.Record.create(
		    [{name:'name'},
		     {name:'size'},
		     {name:'price'}
		    ]))
				
		});
	
	ds.load({params:{start:0,limit:5}});
	
	
	var grid = new Ext.grid.GridPanel({
	    id:'grid',
	    title:'饮水机信息表',
	    ds: ds,
	    height:300,
	    cm: cm,
	    sm: sm,
	    stripeRows:true,//隔行换色
	    loadMask:true,//在加载数据时的遮罩效果
	    trackMouseOver:true,
	    bbar: new Ext.PagingToolbar({
	        pageSize: 5,
	        store: ds,
	        displayInfo: true,
	        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
	        emptyMsg: "没有记录"
	    })    
	    
	});
	grid.render("grid-example");	                                  	
});
</script>

在body标签里面有相应的div显示：

<div id="grid-example" style="margin: 10px;"></div>

在struts.xml配置文件中的代码部分如下：

<struts>
    

	<package name="My" extends="json-default">
	
	<action name="softMachineInit" class="softMachineAction" method="softMachineInit">
		<result type="json">
		
		</result>
	</action>
	
	</package>
</struts>

同时，还记着有json的插件必须引进来，具体的插件在本文的附件中。

Java代码部分如下：

public class SoftMachineAction extends ActionSupport {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private SoftMachine softMachine;
	private SoftMachineDao softMachineDao;
	private String start;
	private String limit;
	List list;
	Long totalProperty;



	public Long getTotalProperty() {
		return totalProperty;
	}



	public void setTotalProperty(Long totalProperty) {
		this.totalProperty = totalProperty;
	}



	public List getList() {
		return list;
	}



	public void setList(List list) {
		this.list = list;
	}






	public void setSoftMachine(SoftMachine softMachine) {
		this.softMachine = softMachine;
	}

	

	public void setSoftMachineDao(SoftMachineDao softMachineDao) {
		this.softMachineDao = softMachineDao;
	}

	@SuppressWarnings("unchecked")
	public String softMachineInit() {	
	
	this.setTotalProperty(80L);
	list = new ArrayList<SoftMachine>();
		try {
			int index = Integer.parseInt(this.start);
			int pageSize = Integer.parseInt(this.limit);
                        //这段代码挺重要的，通过得到index，pageSize，可以从数据 
                         // 库来执行相应的select操作。下面的for循环是一个模拟过程
                         //同时，特别注意，在action类中，必须有list和totalProperty
                         //的get,set方法，这两个属性时与Ext中的代码心对应的。
			for(int i=0;i<5;i++){
				SoftMachine softMachine = new SoftMachine();
				softMachine.setName("name"+i);
				softMachine.setSize("size"+i);
				softMachine.setPrice(Long.valueOf(77+i));
				list.add(softMachine);
			}
		
		} catch (Exception ex) {
		}
		
		return SUCCESS;
	}
	


	public void setStart(String start) {
		this.start = start;
	}



	public void setLimit(String limit) {
		this.limit = limit;
	}

}

好了，这样就可以了。试试吧！

评论

2 楼 孤星119 2009-08-06  

还有个问题，楼主，你的action内能不能接收到totalProperty的值啊？
即
action内的get方法能接收到start 和limit的值，但接收不到totalProperty的值！
在action内设置totalProperty的值，能传到ext内，能正常使用。

这就导致了每次分页查询都要进行两次，一次查询总数目，一次查询需要的list。
怎么解决这个问题，让action内能接收到totalProperty的值，然后如果它非0，只进行一次查询list即可，如果是0，就查询两次，表示是第一次查询，需要得到总数

说了这么多，不知道表述清楚没，还请楼主指点下

1 楼 孤星119 2009-08-06  

多谢楼主啊，困扰了两天的问题终于解决了

必须有list和totalProperty的get,set方法，这两个属性时与Ext中的代码心对应的
————————————————————————————————————————
这里我没有totalProperty的set get方法，不能正确的分页，郁闷了我快两天了，终于解决了