Ext.data.JsonStore的用法
2012-11-09 14:29
579 查看
Ext.data.JsonStore <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all.js"></script> <script> Ext.onReady(function(){ // NOTE: This is an example showing simple state management. During development, // it is generally best to disable state management as dynamically-generated ids // can change across page loads, leading to unpredictable results. The developer // should ensure that stable state ids are set for stateful components in real apps. Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var store=new Ext.data.JsonStore({ //results 表示结果数 //rows 表示从后台传过来的JSON数据 data:{ "results": 2, "rows":[ {"id":1, "city": "suzhou", "areacode": "0512", "perincome": "2500" }, {"id":2, "city": "nanjing", "areacode": "025", "perincome": "2200" }]}, //自动加载(不能用store.load()) autoLoad:true, totalProperty:"results", root:"rows", fields:['title', {name:'city',mapping:'city'}, {name:'areacode',type:'int'}, {name:'perincome',mapping:'perincome',type:'int'}, {name:'id',mapping:'id',type:'int'} ] }); // create the Grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'city',header: "city", width: 400, sortable: true, dataIndex: 'city'}, {header: "areacode", width: 200, sortable: true, dataIndex: 'areacode'}, {header: "perincome", width: 200, sortable: true, dataIndex: 'perincome'} ], stripeRows: true, autoExpandColumn: 'city', height:280, width:600, title:'Array Grid' }); grid.on('rowclick', function(grid, rowIndex, e) { var recordr = store.getAt(rowIndex); alert('id is ' + recordr.get('id') + ',city name is ' + recordr.get('city')); // window.open('index.html');//设置转向地址,用于对row的操作,举个例子 当然也可以用location.href等 }); //把此grid放进grid-example里面 grid.render('grid-example'); }); </script> <div id="grid-example"></div> </html>
相关文章推荐
- 如何把Ext.data.store里的数据一次性用JSON传给后台(添加了后台解析部分)
- Ext.data-GroupingStore/JsonStore/SimpleStore
- Ext.data.Store/GroupingStore/JsonStore/SimpleStore
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- 如何把Ext.data.store里的数据一次性用JSON传给后台(添加了后台解析部分)
- Ext.data-GroupingStore/ JsonStore/ SimpleStore
- Ext.data.Store的基本用法-转载
- EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore javascript
- ext的Ext.data.JsonStore不自动获取数据的问题记录
- 浅谈:Ext.data.JsonStore
- 玩转extjs5之Ext.data.JsonStore与Ext.data.XmlStore(五)
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- 如何把Ext.data.store里的数据一次性用JSON传给后台(添加了后台解析部分)
- ExtJs中同一个URL构造多个Ext.data.JsonStore
- Ext.data.Store 获取Json数据只有一行,而且是最后一行
- Ext.data.JsonStore 数据集使用
- [转载]EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore
- Ext.data.Store的基本用法
- 关于Ext.data.ArrayStore的用法
- Ext.data-GroupingStore/JsonStore/SimpleStore