关闭

ExtJS 简单的gridpanel

364人阅读 评论(0) 收藏 举报
分类:

数据源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>



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:324625次
    • 积分:3800
    • 等级:
    • 排名:第8466名
    • 原创:75篇
    • 转载:54篇
    • 译文:1篇
    • 评论:38条
    文章分类
    最新评论