extjs中的grid不显示问题
- JScript code
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*']);Ext.define('Company', { extend: 'Ext.data.Model', fields: [ { name: 'name', type: 'string' }, { name: 'tel', type: 'string' }, { name: 'mail', type: 'string' }, { name: 'qq', type: 'string' }, { name: 'datetime', type: 'date' } ] });Ext.onReady(function () { Ext.QuickTips.init(); Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider')); function change(val) { if (val > 0) { return '<span style="color:green;">' + val + '</span>'; } else if (val < 0) { return '<span style="color:red;">' + val + '</span>'; } return val; } /** * Custom function used for column renderer * @param {Object} val */ function pctChange(val) { if (val > 0) { return '<span style="color:green;">' + val + '%</span>'; } else if (val < 0) { return '<span style="color:red;">' + val + '%</span>'; } return val; } var store = Ext.create('Ext.data.Store', { model: 'Company', proxy: { //异步获取数据,这里的URL可以改为任何动态页面,只要返回JSON数据即可 type: 'ajax', url: 'extzz.aspx?userslist=list', reader: { type: 'json', root: 'data' } }, autoLoad: true }); store.on('load', function (tempstore) { alert(tempstore.getCount()) }); // create the Grid var grid = Ext.create('Ext.grid.Panel', { store: store, //stateful: true, collapsible: true, multiSelect: true, //stateId: 'stateGrid', columns: [ { text: '用户名', flex: 1, autoHeight: true, sortable: true, dataIndex: 'name' }, { text: '电话', width: 75, autoHeight: true, sortable: true, //renderer: 'usMoney', dataIndex: 'tel' }, { text: '邮箱', autoHeight: true, width: 75, sortable: true, //renderer: change, dataIndex: 'mail' }, { text: 'qq', autoHeight: true, width: 75, sortable: true, //renderer: pctChange, dataIndex: 'qq' }, { text: '添加时间', autoHeight: true, width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'datetime' } ], height: 350, width: 600, title: '用户信息列表', renderTo: 'extjslianxi', viewConfig: { stripeRows: true, enableTextSelection: true } }); });- C# code
StringBuilder sb = new StringBuilder(); string sql = "select * from users"; DataTable dt = DbHelperSQL.Query(sql).Tables[0]; sb.Append("{data:["); for (int i = 0; i < dt.Rows.Count; i++) { sb.Append("{\"name\":\"" + dt.Rows[i]["name"].ToString() + "\",\"tel\":\"" + dt.Rows[i]["tel"].ToString() + "\",\"mail\":\"" + dt.Rows[i]["mail"].ToString() + "\",\"qq\":\"" + dt.Rows[i]["qq"].ToString() + "\".\"datetime\":\"" + dt.Rows[i]["addtime"].ToString() + "\"}"); if (i != dt.Rows.Count - 1) { sb.Append(","); } } sb.Append("]}"); Response.Write(sb.ToString());
输出结果{data:[{"name":"yuanhanqi","tel":"18672331739","mail":"hanqi_net@qq.com","qq":"64416997"."datetime":"2012/8/17 0:00:00"},{"name":"yuanhanqi1","tel":"18672331739","mail":"hanqi_net@qq.com","qq":"64416997"."datetime":"2012/8/17 0:00:00"},{"name":"yuanhanqi2","tel":"18672331739","mail":"hanqi_net@qq.com","qq":"64416997"."datetime":"2012/8/17 0:00:00"},{"name":"yuanhanqi3","tel":"18672331739","mail":"hanqi_net@qq.com","qq":"64416997"."datetime":"2012/8/17 0:00:00"}]}
第一次用extjs做了个练习出问题了找了很久了 就是不晓得问题出在哪里,求大神们帮帮忙
[解决办法]
像列标题这些都显示出来了么?只是不显示数据的话,那就不是show方法的问题了,应该是json字符串的问题了,
json字符串格式首先就有问题:
qq字段和datetime字段间的逗号怎么写成.号了?这个肯定会造成解析错误的。
还有最外层是对象的话,我们一般会在两边加上(),这样用eval解析时不会出错,当然ext也可能不是用的eval解析,不见得有这个问题。那个.号的问题必须改了,然后再试试吧