ExtJS 간단한 gridpanel

2616 단어
데이터 원본 사용자.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>

좋은 웹페이지 즐겨찾기