Panel生成表格

永利402com官方网站 1
永利402com官方网站

               {name: ‘price’, type: ‘float’},

         columns: [   www.2cto.com

               // 第1个数据列

         fields: [

         store: bookStore

               {“id”: 3, name: “疯狂Ajax讲义”,

Ø store:该选用钦点的Store对象承担为该表格提供数据。

         ],

         // 定义该表格包罗的兼具数据列

                    author:’李刚’ , price: 69,
publishDate:’2012-09-08′},

                    xtype:’datecolumn’ , format:’Y年m月d日’ , flex: 1},

Ext.grid.Panel承接了Ext.panel.Panel,由此它的许多地点都好像于Ext.panel.Panel,但定义Ext.grid.Panel时必需钦赐如下三个挑选。

});

在浏览器中浏览该页面,能够见到如图6.71所示效果。

               {name: ‘author’, type: ‘string’},

               {“id”: 1, name: “疯狂Java讲义”,

永利402com官方网站, 

<script type=”text/javascript”>

         data : [

    var bookStore = Ext.create(‘Ext.data.Store’,

               { text: ‘出版时间’, dataIndex: ‘publishDate’,

               {name: ‘name’, type: ‘string’},

图6.71 使用Ext.grid.Panel生成表格

         width: 550, // 钦赐表单宽度

         ]

程序清单:codes\06\6.8\Ext.grid\Ext.grid.Panel.html

Ext.grid.Panel承接了Ext.panel.Panel,因而它的居多地方都就好像于Ext.panel.Panel,但定义Ext.grid.Panel时必须内定如下多少个选项…

    });

Ext.onReady(function(){

                    author:’李刚’ , price: 99,
publishDate:’2011-09-02′},

 

</body>

    Ext.create(‘Ext.grid.Panel’, {

                    author:’李刚’ , price: 109,
publishDate:’2012-01-01′},

         model: ‘Book’,

Ø
columns:内定Ext.grid.column.Column数组或八个暗含items属性(该属性值为Ext.grid.column.Column数组)的靶子,该Ext.grid.column.Column数组内定Ext.grid.Panel生成的报表包含的全体列。

使用Ext.grid.Panel生成表格

    });

    {

         // 直接利用data钦命数量

永利402com官方网站 1

               { text: ‘价格’, dataIndex: ‘price’ , flex: 1 }, //
第一个数据列

         ]

    Ext.define(‘Book’, {

               { text: ‘笔者’, dataIndex: ‘author’, flex: 1 }, //
首个数据列

         // 钦定使用Book Model管理记录

               {“id”: 2, name:”轻量级Java EE公司应用实战”,

地点的演示创造了一个Ext.grid.Panel,这些Panel对象将会在页面上生成一个表格。定义该Ext.grid.Panel对象时钦定了columns、store五个挑选,其中columns选项钦点该表格包含的数据列,以及各列所展示的数量;store选项钦命一个Store对象,该Store负担提供该表格展现的数目。

    // 创设三个Ext.data.Store对象

正如代码示范了怎么样使用Ext.grid.Panel来变化表格。

         extend: ‘Ext.data.Model’,

从图6.71能够看看,使用Ext.grid.Panel生成的报表比通常HTML表格越来越美观,并且该表格默许能够对各列进行排序,并且能够私行支配各列的显得、遮蔽。除了这些之外,Ext.grid.Panel生成表格的列暗中同意允许通过拖动改变列宽、通过拖动改动列与列之间的排列顺序。

</script>

         title: ‘查看图书’,

    });

<body>

               {name: ‘publishDate’, type: ‘date’}

               { text: ‘书名’, dataIndex: ‘name’ , flex: 1 }, //
第三个数据列

         renderTo: Ext.getBody(),

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图