ExtJS6.2.0 grid展示一个ArrayStore数据

博主是使用IIS技术搭建WEB实现对ext-6.2.0-gpl.rar文件的示例项目的快速访问和学习的。

IIS是什么

Win10系统下IIS搭建WEB项目

 

ExtJS__data  数据源_ArrayStore

ArrayStore继承自 Ext.Data.Store

//准备的数据
var arrayData = [
	    ['3m Co',71.72,0.02,0.03],
	    ['Alcoa Inc',29.01,0.42,1.47],
	    ['Boeing Co.',75.43,0.53,0.71],
	    ['Hewlett-Packard Co.',36.53,-0.03,-0.08],
	    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63]
	];

//数据的表格字段
	var arrFields = [ 
		'company',
	   	{name: 'price', type: 'float'},
	    {name: 'change', type: 'float'},
	    {name: 'pctChange', type: 'float'}
	];

//给予数据属性方便选择
//Store Container
	var myStore = new Ext.data.Store({
	    storeId: "arrayStore",
	    data: arrayData,
	    fields: arrFields,
	    proxy:{
	        type: "memory",
	        reader:{
	            type: "array"
	        }
	    }
	});

//创建表格展示数据
var myGrid = new Ext.grid.GridPanel({
        renderTo: Ext.getBody(),
        title: "Demo of Grid",
        style: "width:400px; margin:10px;",
        autoHeight: true,
        store: Ext.StoreMgr.lookup("arrayStore"),
        columns: {
            items:[
             	{ header: "company", dataIndex: "company"},
                { header: "price", dataIndex: "price"},
                { header: "change", dataIndex: "change"},
                { header: "pctChange", dataIndex: "pctChange"}
            ],
            defaults:{    // here, apply default config to each column
                align: "center"
            }
        }
    });

运行后结果