Extjs: Struts2整合Extjs Grid时无法显示数据

[shuaiyz]

问题描述：在Action中获取list,从配置文件上合成json,可页面上的grid显示不出来数据。急急！！在线等！！

<script>
Ext.onReady(function(){
//定义store
var ds=new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'tml/tml.action',method:'post'}),
reader:new Ext.data.JsonReader({
totalProperty:"total",
root:'list'
},
[
{name:'terminal_uid',mapping:'terminal_uid',type:'int'},
{name:'terminal_id',mapping:'terminal_id',type:'string'},
{name:'terminal_type',mapping:'terminal_type',type:'string'},
{name:'is_controllable',mapping:'is_controllable',type:'char'},
{name:'is_shuttable',mapping:'is_shuttable',type:'char'},
{name:'is_readdable',mapping:'is_readdable',type:'char'},
{name:'charge_person',mapping:'charge_person',type:'string'},
{name:'active_time',mapping:'active_time',type:'date'},
{name:'is_active',mapping:'is_active',type:'char'}
])
});
ds.load();
var sm =new Ext.grid.CheckboxSelectionModel(); //CheckBox选择列
var colM=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//行号列
sm,
{header:"终端ID",dataIndex:"terminal_uid",align:'center',sortable:true},
{header:"终端编号",dataIndex:"terminal_id",align:'center',sortable:true},
{header:"终端类型",dataIndex:"terminal_type",align:'center',sortable:true},
{header:"是否可控制",dataIndex:"is_controllable",align:'center',sortable:true},
{header:"是否可跳闸",dataIndex:"is_shuttable",align:'center',sortable:true},
{header:"是否可读表",dataIndex:"is_readdable",align:'center',sortable:true},
{header:"负责人",dataIndex:"charge_person",align:'center',sortable:true},
{header:"投运日期",dataIndex:"active_time",align:'center',
renderer:Ext.util.Format.dateRenderer('Y年m月d日'),editor:new Ext.form.DateField({format:'Y年m月d日'})},
{header:"是否有效",dataIndex:"is_active",align:'center',sortable:true}
]);
var grid=new Ext.grid.GridPanel({
renderTo:"hello",
title:"终端信息列表",
height:400,
width:1000,
cm:colM,
ds:ds,
sm:sm,
tbar:({
title:'工具栏',
items:[{xtype:'tbseparator'},{pressed:true,xtype:'button',text:'添加'},
{xtype:'tbseparator'},{pressed:true,xtype:'button',text:'删除'},
{xtype:'tbseparator'},{pressed:true,xtype:'button',text:'修改'}]
}),
autoExpandColumn:2
});
grid.render();
});
</script>

[leehuat]

给你个实例吧！

  var rolegroup = function() {
	var _this ,grid, win, form;
	var user_id = Ext.roleInfo.id;
	var userName = Ext.roleInfo.name;
	
	return {
		init: function() {
			_this = this ;

			grid = _this.createGrid();
						
			var view = new Ext.Viewport({
				layout: 'fit',
				items: [new Ext.TabPanel({
					activeTab: 0,
					items: [grid]
				})]
			});
			
			grid.getStore().load({params:{start:0, limit:29}});
		},
		
		createGrid: function() {
			var sm = new Ext.grid.CheckboxSelectionModel();
		    var ds = new Ext.data.Store({
		    	baseParams: {userid: user_id},
		    	proxy:  new  Ext.data.HttpProxy({url:'page/roleManage.action',method:'POST'}),
		    	reader: new  Ext.data.JsonReader({
                totalProperty: 'totalProperty', 
                root: 'root',  
                fields:['id' ,
                        'loginname',
                     'password','name','roleid','rolename','status','pym']})
		   });
		   
		   var menu = new Ext.menu.Menu({
		    	width: 100,
		    	items:[
		    		new Ext.menu.CheckItem({text:'登录账号',value: 'loginname',checked: true,hideOnClick: false}),
		    		new Ext.menu.CheckItem({text:'人员姓名',value: 'name',checked: true,hideOnClick: false}),
		    		new Ext.menu.CheckItem({text:'拼音码',value: 'pym',checked: true,hideOnClick: false})
		    	]
		    });
		    
		    var trigger = new Ext.form.TwinTriggerField({
		    	trigger1Class:'x-form-clear-trigger',
		    	trigger2Class:'x-form-search-trigger',
		    	enableKeyEvents: true ,
		    	plugins: new Ext.ux.Uppercase(),
		    	listeners: {
		    		'keypress': function(t,e) {
		    			if(e.getKey() != '13'){
		    				return ;
		    			}
		    			var value = t.getValue();
				    	var param = '';
				    	menu.items.each(function(item){
				    		if(item.checked) {
				    			param = param+'A.' +item.value+' like '+"'%"+value+"%' or "
				    		}
				    	});
				    	param = param.substring(0,param.length-3);
				    	
				    	var store = grid.getStore();
						store.setBaseParam('par',param);
						store.load({params:{start:0, limit:29}});
		    		}
		    	}
		    });
		    trigger.onTrigger1Click = function(e) {
		    	trigger.reset();
		    }
		    
		    trigger.onTrigger2Click = function(e) {
		    	var value = trigger.getValue();
		    	var param = '';
		    	menu.items.each(function(item){
		    		if(item.checked) {
		    			param = param+'A.'+ item.value+' like '+"'%"+value+"%' or "
		    		}
		    	});
		    	param = param.substring(0,param.length-3);
		    	
		    	var store = grid.getStore();
				store.setBaseParam('par',param);
				store.load({params:{start:0, limit:29}});
		    }		    
		    
			var grid = new Ext.grid.GridPanel({
				viewConfig: {
		            forceFit:true
		        },
		        title:'权限管理',
		        iconCls:'icon-grid',
		        loadMask: true,
		        stripeRows: true,
		        
		        store: ds ,
		        tbar: [
		        	{text: '新增',iconCls: 'add',handler: _this.add},'-',
		        	{text: '删除',iconCls: 'delete',handler: _this.remove},
		        	{text: '查看',iconCls: 'detail',handler: _this.show},
		        	{xtype: 'tbfill'},
		        	{xtype: 'splitbutton',text:'检索：',iconCls: 'search',menu: menu},
		        	trigger
		        ],
		        
		        sm: sm,
		        
		        cm: new Ext.grid.ColumnModel([
		            new Ext.ux.grid.PagingRowNumberer(),
		            sm,
		            {header: "人员ID", width: 80, sortable: true, dataIndex: 'id'},
		            {header: "登录账号", width: 80, sortable: true, dataIndex: 'loginname'},
		            {header: "登录密码", width: 120, sortable: true, dataIndex: 'password'},
		            {header: "人员姓名", width: 140, sortable: true, dataIndex: 'name'},
		            {header: "角色", width: 80, hidden: true, dataIndex: 'roleid'},
		            {header: "角色名称", width: 80, sortable: true, dataIndex: 'rolename'},
		            {header: "状态", width: 80, sortable: true, dataIndex: 'status'},
		            {header: "拼音码", width: 80, hidden: true, dataIndex: 'pym'}

		        ]),
		        bbar: new Ext.PagingToolbar({
		              store : ds,
		              pageSize :29,
		              displayInfo: true,
		              displayMsg:  '数据从第 {0} 条到第 {1} 条 共 {2} 条数据',
		              emptyMsg: "没有记录"
		           })		        
		    });
		
		    return grid ;
		},
		
		add: function() {
			if(!win) {
				win = _this.createWin();
			}
			
			win.buttons[0].setVisible(true);
			win.buttons[1].setVisible(true);
			win.show();
			form.form.reset();
			form.form.findField('roleid').setValue('1');
			win.setTitle('新增权限');
		},
		
		remove: function() {
			var record = grid.getSelected({
				multiSelect: false,
				alertType:'suggest',
				returnType:'record',
				err1:'请选择要删除的记录!',
				err2:'一次只能删除一条记录！'
			});
			if(!record) {
				return ;
			}
			
			var info = '你确定要删除<font color=red>  '+record.get('name')+'  </font>该条记录吗,删除后将无法恢复？';
			
			
			var fun = function(btn) {
				if(btn == 'no') {
					return ;
				}
				Ext.Ajax.request({
                method : 'POST',
                url: 'page/delRole.action',
                params : {id: record.get('id')},
                scope : this,
                success : function(response, options) {
                   var data = Ext.util.JSON.decode(response.responseText);
				   grid.store.reload();
				   Msg.suggest('提示',data.msg)
                }
            });
			}
			
			Msg.confirm('提示',info,fun, this);
		},
		
		show: function() {
			var record = grid.getSelected({
				multiSelect: false,
				alertType:'suggest',
				returnType:'record',
				err1:'请选择要查看的记录!',
				err2:'一次只能查看一条记录！'
			});
			if(!record) {
				return ;
			}
			
			if(!win) {
				win = _this.createWin();
			}
			win.buttons[0].setVisible(false);
			win.buttons[1].setVisible(false);
			win.show();
			form.form.reset();
			form.form.setValues(record.data);
			win.setTitle('查看');
		},
		
		createWin: function() {
			form = _this.createFormPanel();
			
			var close = function(){
				window.hide();
			}
			var reset = function() {
				form.form.reset();
				form.form.findField('roleid').setValue('1');
			}
			
			var window = new Ext.Window({
				buttonAlign: 'center',
				closeAction: 'hide',
				layout: 'fit',
				title: '新增权限',
				width: 500,
				height: 180,
				iconCls:'icon-grid',
				modal: true ,
				items: [form],
				buttons: [
					{text: '保 存',handler: _this.save},
					{text: '重 置',handler: reset},
					{text: '返 回',handler: close}
				]
			});
			
			
			return window ;
		},
		
		save: function() {
			var f = form.getForm();
			if(f.isValid()) {
				f.submit({
					url: 'page/saveRole.action',
					method : 'POST',
					waitMsg:'请稍等，正在保存.....', 
					params : {roleid:  f.findField('roleid').getValue()},
					success: function(fo, action) {
					   win.hide();
					   grid.store.reload();
				       Msg.suggest("提示：", '保存成功！');
				       Ext.MessageBox.hide();
				       return ;
				    }
				});
			}
		},
		
		createFormPanel: function() {
			var formPanel = new Ext.form.FormPanel({
				frame:true,
				labelWidth: 65,
				labelAlign:'left',
				items:[{
				 	xtype:'fieldset',
					title:'基本信息',
					autoHeight:true,
					items:[{
						layout:'column',
		                border:false,
		                defaults:{border: false},
		                items: [{
		                			columnWidth:.4,
		                			layout:'form',
		                			defaults: {anchor: '95%'},
		                			items:[
		                				{xtype: 'textfield',fieldLabel: '登录账号',name: 'loginname'},
		                				{xtype: 'textfield',fieldLabel: '人员姓名',name: 'name'},
		                				{xtype: 'hidden',name: 'id'}
		                			]
		                		},
								{
									columnWidth:.6,
									layout:'form',
									defaults: {anchor: '95%'},
									items:[
										{xtype: 'textfield',fieldLabel: '登录密码',name: 'password'},
										{xtype: 'combo',mode: 'local',valueField:'value',displayField:'text',
		               					store: new Ext.data.ArrayStore({fields:['value','text'],data: [
		               						['1','客户经理'],['2','部门经理'],['3','其他部门']
		               					]}) , fieldLabel: '人员角色',value: '1',triggerAction: 'all',
		               					name: 'roleid',editable: false}
									]
								}
						]}
					]
				 }
				]
			});
			
			return formPanel ;
		}
	}
}();                                                                                                        

Ext.onReady(rolegroup.init,rolegroup,true);

[leehuat]

  public class RoleAction extends ActionSupport {
	private HttpServletResponse res ;
	private HttpServletRequest req ;
	private RoleManage roleMange ;
	private XmlParser xml = new XmlParser(); 
	
	public String execute() throws Exception {
		res = ServletActionContext.getResponse();
		req = ServletActionContext.getRequest() ;
		String where = " where 0=0 ";
		
		String start = req.getParameter("start") ;
		String limit = req.getParameter("limit") ;
		
		String foo = req.getParameter("par");
		if(foo != null && !"".equals(foo)) {
			where = where +"and ("+foo+")" ;
		}
				
		int pageSize = Integer.parseInt(limit) ;
		int pageNo = (Integer.parseInt(start)+1)/pageSize == 0 ? 1: (Integer.parseInt(start)+1)/pageSize+1;
		String sql = xml.getLocationURL(req, "sql.xml", "role_manage");
		
		List list = roleMange.find(sql, where, pageNo, pageSize);
		
		String tsql = xml.getLocationURL(req, "sql.xml", "role_manage_total");
		List l = roleMange.find(tsql,where, 0, 0) ;
	
		String json =  Convert.list2String(sql, list, l) ;
		res.setCharacterEncoding("UTF-8");
		res.setContentType( "text/html;charset=UTF-8");
		
		PrintWriter out = res.getWriter() ;
		
		out.write(json) ;
		return null ;
	}

[licip]

你首先要确定：proxy:new Ext.data.HttpProxy({url:'tml/tml.action',method:'post'}),
有正确的执行，而且，执行后返回的数据是json的形式。最好用fireBug调试看一看。

[hoojo]

ds.load({params:{start:0, limit:10}});
还有分页的store需要设置数据和总数
{total: 50, list: [{这里的数据和fields中的字段对应}, {....}]}

[shuaiyz]

谢谢大家，问题已经解决了，结贴先