本文介绍如何使用ExtJS框架中的GridPanel组件实现数据展示功能。主要包括：创建二维数组存储数据；利用ArrayStore处理数据；配置GridPanel并设置store；定义列模型；实现交互动作；设置斑马线效果及自动扩展宽度；启用状态记忆；最终将Grid渲染到页面上。
array-grid的学习：
1。需要先创建一个原始数据，一般为二维数组。
2。Ext为我们提供了数组数据处理类ArrayStore类。ArrayStore类中，fields表示的字段数组,name表示的即为列模型中的dataIndex，然后还要调用store.loadData(mydata)加载。参数为原始数据数组名
3。创建一个GridPanel,写入正确的store。创建列模型。在列里可以进行动作的处理。登记类型为actionlumn
4。加入斑马线效果 stripeRows: true
5.自动扩展宽度autoExpandColumn。如autoExpandColumn: 'company'
6。记忆状态stateful:true stateId,如stateId:'grid'
7.最后把gird渲染到某个CSS上去。如grid.render('grid-example')
1。需要先创建一个原始数据，一般为二维数组。
2。Ext为我们提供了数组数据处理类ArrayStore类。ArrayStore类中，fields表示的字段数组,name表示的即为列模型中的dataIndex，然后还要调用store.loadData(mydata)加载。参数为原始数据数组名
3。创建一个GridPanel,写入正确的store。创建列模型。在列里可以进行动作的处理。登记类型为actionlumn
4。加入斑马线效果 stripeRows: true
5.自动扩展宽度autoExpandColumn。如autoExpandColumn: 'company'
6。记忆状态stateful:true stateId,如stateId:'grid'
7.最后把gird渲染到某个CSS上去。如grid.render('grid-example')
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
