ext 4.0 学习笔记（1）Array Grid
今天刚开始接触EXT，直接跳过2.2等较旧版本；由于网上的中文资料几乎都是2.2，并且我也是刚开始接触EXT，所以用笔记的方式记录我学习的历程，顺便作为一种中文资料的共享；这套笔记讲解每一种对象的属性未必是完全的，主要是讲解EXT4.0自带demo，要深入学习的可以去查看API，我的资源有EXT3.0的中文API
今天学习的是：Array Grid，效果如下：
首先先讲新手入门最头痛的问题，就是环境配置：
EXT4.0官方下载地址： http://extjs.cachefly.net/ext-4.0.2a-gpl.zip
够意思了吧？
样式配置最好是直接吧ext-4.0.2a下的resources这个文件夹全部考到项目中，新手最好这样做，不然出现各种蛋疼的样式问题的时候会很纠结
JS配置：如果要引用bootstrap.js；必须把bootstrap.js、ext-all-debug.js、ext-all.js放在同一个目录下
原因在于bootstrap.js的源码中有这样一句话：
if (isDevelopment === null && window.location.protocol === 'file:') {
isDevelopment = true;
}
document.write('');意思大概为如果是本地访问则使用ext-all-debug.js，远程访问则使用ext-all.js
这就是为什么有些EXT入门者会经常出现EXT对象未定义的问题。
Array Grid数据模型大概是这样子的：
Grid由Ext.grid.Panel构成，Ext.grid.Panel有以下属性
store：Panel的数据来源，是一个Ext.data.ArrayStore对象
stateful：是否保存样式的状态，true为保存，false为不保存；但保存只要在代码最前面加入
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
stateId：样式状态的索引（ID）
columns：如果把Ext.grid.Panel比作一张表，这属性就是列
text：列名sortable：该列是否允许升序降序排序；true能renderer：值过滤器，该列的值都使用指定过滤器进行过滤dataIndex：数据项，获取store指定的列，对应Ext.data.ArrayStore中fields的namextype：特殊类型的列；如：actioncolumn为事件列width：宽height：高items：项，允许有多个项icon：图标URLtooltip：文字描述handler: function(grid, rowIndex, colIndex)，函数句柄
height：宽
width：高
title：Array Grid的标题
renderTo：使用Array Grid的HTML元素的id
store是一种数据存储容器，有Ext.data.ArrayStore，Ext.data.DirectStore，Ext.data.GroupingStore，Ext.data.JsonStore等
这里只讲解 Ext.data.ArrayStore
fields：定义列
name：列名
type：数据类型
dataformat：数据填充格式
data：数据源，一个二维数组
附上Array Grid的源码：
/*
This file is part of Ext JS 4
Copyright (c) 2011 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
*/
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
// sample static data for the store
var myData = [
['3m&Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '' + val + '';
} else if (val < 0) {
return '' + val + '';
}
return val;
}
/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '' + val + '%';
} else if (val < 0) {
return '' + val + '%';
}
return val;
}
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Hold stock';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
}
}]
}
],
height: 350,
width: 600,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});