Extjs整合struts2(1)

步骤1、在项目中添加struts2的库。如下

 

步骤2、添加Google的jsonplugin 插件。

下载Google json插件http://code.google.com/p/jsonplugin/downloads/detail?name=jsonplugin-0.34.jar&can=2&q=，jsonplugin-0.34.jar  包放入项目的库中。注意版本要正确。

步骤3、写action类，配置struts.xml文件。

view plaincopy to clipboardprint?
<package name="agnet-json" extends="json-default" 
    namespace="/agent"> 
    <action name="jsonDemo" 
        class="com.voicesoft.agentbrowser.web.actions.JsonDemo"> 
        <result type="json"> 
            <param name="defaultEncoding">utf-8</param> 
        </result> 
    </action>       
</package> 
 <package name="agnet-json" extends="json-default"
  namespace="/agent">
  <action name="jsonDemo"
   class="com.voicesoft.agentbrowser.web.actions.JsonDemo">
   <result type="json">
    <param name="defaultEncoding">utf-8</param>
   </result>
  </action>  
 </package>

在配置改action的时候务必加上<result type="json"> <param name="defaultEncoding">utf-8</param> </result>否则不兼容ie7因为ie7只认识utf-8编码格式不认识utf8格式，这个都是我研究好久搞出来的结论。

步骤4、添加extjs库。

在extjs官方下载extjs库引入库文件

 

步骤5、写一个通过ext的jsonstore获取数据，并用extjs的datagrid显示数据的例子。

view plaincopy to clipboardprint?
/** 
 * panlegrid 分页显示json数据的例子 
 */ 
Ext.onReady(function() {  
            var store = new Ext.data.JsonStore({  
                        url : "/CallCenterMS/agent/jsonDemo.action",  
                        totalProperty : "results",  
                        root : "rows",  
                        remoteSort : true,  
                        fields : ['id', 'key0', 'key1', 'key2']  
                    });  
            store.on('beforeload', function() {  
                        Ext.apply(this.baseParams, {  
                            test : 12  
                                // 你需要传的参数  
                            });  
                    });  
            store.load({  
                        params : {  
                            start : 0,// 起始页数  
                            limit : 10  
                        }  
                    });  
            var grid = new Ext.grid.GridPanel({  
                        width : 500,  
                        height : 400,  
                        title : '分页测试',  
                        store : store,  
                        defaults : {  
                            // width : 100,  
                            sortable : true 
                        },  
                        // grid columns  
                        columns : [{  
                                    header : "id",  
                                    dataIndex : 'id' 
                                }, {  
                                    header : "key0",  
                                    dataIndex : 'key0' 
                                }, {  
                                    header : "key1",  
                                    dataIndex : 'key1' 
                                }, {  
                                    header : "key2",  
                                    dataIndex : 'key2' 
                                }],  
                        loadMask : {  
                            msg : "数据加载中，请稍等..." 
                        },  
                        bbar : new Ext.PagingToolbar({  
                                    pageSize : 10,  
                                    store : store,  
                                    displayInfo : true,  
                                    beforePageText : ' 第 ',  
                                    afterPageText : ' 共 {0} 页 ',  
                                    displayMsg : '当前显示第 {0} 条到  {1}条，共计 {2} 条',  
                                    emptyMsg : "没有记录" 
                                }),  
                        buttons : [{  
                                    text : '第二页',  
                                    listeners : {  
                                        "click" : function() {  
                                            store.load({  
                                                        params : {  
                                                            start : 2,// 起始页数  
                                                            limit : 10  
                                                            // 每次取的页数  
                                                        }  
                                                    });  
                                        }  
                                    }  
                                }]  
                    });  
            grid.render(Ext.getBody());  
        }) 

 

转自：http://blog.csdn.net/open2job/archive/2009/11/11/4797277.aspx