ExtJS 简单的gridpanel

最新推荐文章于 2018-12-12 10:28:22 发布

tingyuanss

最新推荐文章于 2018-12-12 10:28:22 发布

阅读量638

点赞数

分类专栏： ExtJs

本文链接：https://blog.csdn.net/tingyuanss/article/details/46804159

版权

ExtJs 专栏收录该内容

7 篇文章 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>

tingyuanss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS 简单的gridpanel

数据源users.json{ "users": [{ "firstName": 'xu', "lastName":'yawen', "age": 24, "eyeColor": 'black' },{ "firstName": 'zhang', "lastName":'wei', "age": 24, "eyeColor": 'black' },{
复制链接

扫一扫