ExtJS 简单的gridpanel
2015-07-08 15:38
609 查看
数据源users.json
{ "users": [{ "firstName": 'xu', "lastName":'yawen', "age": 24, "eyeColor": 'black' },{ "firstName": 'zhang', "lastName":'wei', "age": 24, "eyeColor": 'black' },{ "firstName": 'zhang', "lastName":'yu', "age": 26, "eyeColor": 'black' }] }gird.html
<!DOCTYPE html> <html> <head> <title>store</title> <link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css"> <script type="text/javascript" src="ext-4.2.1/ext-all-dev.js"></script> <script type="text/javascript"> Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'firstName', type: 'string'}, {name: 'lastName', type: 'string'}, {name: 'age', type: 'int'}, {name: 'eyeColor', type: 'string'} ] }); var myStore = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url: 'users.json', reader: { type: 'json', root: 'users' } }, autoLoad: true }); Ext.onReady(function(){ Ext.create('Ext.grid.Panel', { title:'Simple grid', store: myStore, columns: [ {text: 'firstName', dataIndex:'firstName'}, {text: 'lastName', dataIndex: 'lastName', flex:1}, {text: 'age', dataIndex: 'age'}, {text:'eyeColor',dataIndex: 'eyeColor'} ], height: 200, width: 400, renderTo: Ext.getBody() }) }); </script> </head> <body> </body>
相关文章推荐
- js实现页面时间动态变化
- JSP中文文件名下载(含IE处理方案)
- ExtJs 实现combo前台分页
- js内存分析
- JSP四个作用域
- ExtJs 继承 和 插件 示例
- Javascript实现Tab切换
- 【FastJSON】解决FastJson中“$ref 循环引用”的问题
- knockout.js实例一~联系人管理器
- js寻路算法
- javascript实现10个球随机运动、碰撞实例详解
- JVM监控工具介绍jstack, jconsole, jinfo, jmap, jdb, jstat
- ArcGIS文件(arcgis_js_api)部署相关问题总结
- Javascript报uncaught typeerror illegal invocation错误
- 汉字转拼音插件:LM-PinYin.js
- js性能调试
- JS-JavaScript学习笔记(一)
- javascript基础八(知识点类闭包)
- js实现图片滚轮放大缩小以及鼠标拖动
- Javascript 正则表达式_3