- <span style="font-size:14px;">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></span>
【ExtJS】Ext.data.JsonStore
最新推荐文章于 2021-08-06 00:45:04 发布