读书人

extjs中的grid不显示有关问题

发布时间: 2012-09-17 12:06:51 作者: rapoo

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解析,不见得有这个问题。那个.号的问题必须改了,然后再试试吧

读书人网 >JavaScript

热点推荐