JSON

ExtJS4学习笔记(四)---Grid的使用

字号+ 作者:H5之家 来源:H5之家 2015-09-26 17:00 我要评论( )

Extjs4 Grid创建还是比较容易的,难记、难理解的地方,也就是数据的获

Ext.require([ 'Ext.grid.*', 'Ext.data.*' ]); Ext.onReady(function(){ Ext.define('MyData',{ extend: 'Ext.data.Model', fields: [ //第一个字段需要指定mapping,其他字段,可以省略掉。 {name:'UserName',mapping:'UserName'}, 'Sex', 'Age', 'XueHao', 'BanJi' ] }); //创建数据源 var store = Ext.create('Ext.data.Store', { model: 'MyData', proxy: { //异步获取数据,这里的URL可以改为任何动态页面,只要返回JSON数据即可 type: 'ajax', url: 'mydata.json', reader: { type: 'json', root: 'items', //totalProperty : 'total' } }, autoLoad: true }); //创建Grid var grid = Ext.create('Ext.grid.Panel',{ store: store, columns: [ {text: "姓名", width: 120, dataIndex: 'UserName', sortable: true}, {text: "性别", flex: 1, dataIndex: 'Sex', sortable: false}, {text: "年龄", width: 100, dataIndex: 'Age', sortable: true}, {text: "学号", width: 100, dataIndex: 'XueHao', sortable: true}, {text: "班级", width: 100, dataIndex: 'BanJi', sortable: true} ], height:400, width:480, x:20, y:40, title: 'ExtJS4 Grid示例', renderTo: 'demo', viewConfig: { stripeRows: true } }) })

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评