Extjs 3.4 - GridPanel 配置

最新推荐文章于 2018-05-07 19:58:11 发布

原创最新推荐文章于 2018-05-07 19:58:11 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#extjs

JS 同时被 2 个专栏收录

2 篇文章

订阅专栏

Extjs

1 篇文章

订阅专栏

  Extjs gridpanel  配置大概有几个比较重要的 
   
    1.Store 数据源 

    2.Columns或cm 定义列渲染 ， header 列名 dataIndex 数据索引 render 列渲染方法

    3.ViewConfig.forceFit为true + 父窗体layout为 fit  时 可让girdpanel 自适应宽高   

    eg:

   var gpanel = new Ext.Panel({
            title: "订单查询",
            layout: "fit",
            items: [{
                xtype: "grid",
                sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),
                columnLines: true,
                viewConfig: {
                    forceFit: true, 
                    emptyText: '系统中还没有任务'
                },
                bbar: new Ext.PagingToolbar({}),          
                store: new Ext.data.JsonStore({
                    url: "/admin/Order",
                    autoLoad: true,
                    root:"data",
                    fields: ['o_OrderNo', 'o_TicketCount', 'o_PayAmount', 'o_CustomerName', 'o_IdCard', 'o_Telephone', 'o_SaleTime', 'o_Status']

                }),         
                columns: [  { header: "订单号", dataIndex: "o_OrderNo",
                                      width:160, sortable: true },
                            { header: "票数", dataIndex: "o_TicketCount",
                                       width: 160, sortable: true },
                            { header: "金额", dataIndex: "o_PayAmount", 
                                       width: 160, sortable: true },
                            { header: "用户", dataIndex: "o_CustomerName",
                                       width: 160, sortable: true },
                            { header: "身份证", dataIndex: "o_IdCard", 
                                       width: 160, sortable: true },
                            { header: "手机", dataIndex: "o_Telephone",
                                       width: 160, sortable: true },
                            { header: "售票时间", dataIndex: "o_SaleTime", 
                                       width: 160, sortable: true },
                            { header: "状态", dataIndex: "o_Status",
                                       width: 160, sortable: true },
                ]

            }]

        });