使用的Extjs版本为4.2，示例是官方的版本，对里面的语法进行一句一句的学习研究。可以方便他人，又可以提升自己的理解。里面存在的问题，后期会一步一步改进。也欢迎各位指出。
/*
Extjs具有很庞大的扩展库，
每个扩展的容量都十分大，
通过Loader用于对扩展的动态加载，
实现对扩展组件的即用即取.*/
//通过enabled：true，开启Extjs的动态加载
Ext.Loader.setConfig({enabled: true});
//确定加载地点
Ext.Loader.setPath(\'Ext.ux\', \'../ux\');
//用到哪些组件,然后就预先加载,多余不用加载的组件
Ext.require([
\'Ext.grid.*\',
\'Ext.data.*\',
\'Ext.ux.grid.FiltersFeature\',
\'Ext.toolbar.Paging\',
\'Ext.ux.ajax.JsonSimlet\',
\'Ext.ux.ajax.SimManager\'
]);
//Extjs自定义一个Product产品类
Ext.define(\'Product\', {
//extend:表明Extjs中类的继承，表明Product继承自Ext.data.Model类
/*详细的内容介绍可以参考https://www.cnblogs.com/youring2/archive/2013/08/22/3274135.html*/
extend: \'Ext.data.Model\',
fields: [{
name: \'id\',
type: \'int\'
}, {
name: \'company\'
}, {
name: \'price\',
type: \'float\'
}, {
name: \'date\',
type: \'date\',
dateFormat: \'Y-m-d\'
}, {
name: \'visible\',
type: \'boolean\'
}, {
name: \'size\'
}]
});
//类似于js的onready
Ext.onReady(function(){
Ext.ux.ajax.SimManager.init({
delay: 300,
defaultSimlet: null
}).register({
\'myData\': {
data: [
[\'small\', \'small\'],
[\'medium\', \'medium\'],
[\'large\', \'large\'],
[\'extra large\', \'extra large\']
],
stype: \'json\'
}
});
var optionsStore = Ext.create(\'Ext.data.Store\', {
fields: [\'id\', \'text\'],
proxy: {
type: \'ajax\',
url: \'myData\',
reader: \'array\'
}
});
//初始化标签中的Ext:Qtip属性。没怎么看明白，之后再回顾
Ext.QuickTips.init();
// for this demo configure local and remote urls for demo purposes
var url = {
local: \'grid-filter.json\', // static data file
remote: \'grid-filter.php\'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = true;
//创建一个数据仓库
var store = Ext.create(\'Ext.data.JsonStore\', {
// store configs
autoDestroy: true,
model: \'Product\',
//proxy告诉我们从哪里获取数据
proxy: {
type: \'ajax\',
url: (local ? url.local : url.remote),
//reader告诉我们如何解析这个数据
reader: {
type: \'json\',
root: \'data\',
idProperty: \'id\',
totalProperty: \'total\'
}
},
remoteSort: false,
sorters: [{
property: \'company\',
direction: \'ASC\'
}],
pageSize: 50
});
var filters = {
ftype: \'filters\',
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
// added here.
filters: [{
type: \'boolean\',
dataIndex: \'visible\'
}]
};
var createColumns = function (finish, start) {
//创建表格中的列的属性
//这里是创建两个列，id，company，price，size
var columns = [{
dataIndex: \'id\',
text: \'Id\',
// instead of specifying filter config just specify filterable=true
// to use store\'s field\'s type property (if type property not
// explicitly specified in store config it will be \'auto\' which
// GridFilters will assume to be \'StringFilter\'
filterable: true,
width: 30
//,filter: {type: \'numeric\'}
}, {
dataIndex: \'company\',
text: \'Company\',
id: \'company\',
flex: 1,
filter: {
type: \'string\'
// specify disabled to disable the filter menu
//, disabled: true
}
}, {
dataIndex: \'price\',
text: \'Price\',
filter: {
//type: \'numeric\' // specify type here or in store fields config
},
width: 70
}, {
dataIndex: \'size\',
text: \'Size\',
filter: {
type: \'list\',
store: optionsStore
//,phpMode: true
}
}, {
dataIndex: \'date\',
text: \'Date\',
filter: true,
renderer: Ext.util.Format.dateRenderer(\'m/d/Y\')
}, {
dataIndex: \'visible\',
text: \'Visible\'
// this column\'s filter is defined in the filters feature config
}];
return columns.slice(start || 0, finish);
};
//创建grid图标
var grid = Ext.create(\'Ext.grid.Panel\', {
border: false,
store: store,
//创建表格中的列，里面创建四列
columns: createColumns(4),
loadMask: true,
features: [filters],
dockedItems: [Ext.create(\'Ext.toolbar.Paging\', {
dock: \'bottom\',
store: store
})],
//设置在没有记录的时候表格图标里面该显示什么
emptyText: \'No Matching Records\'
});
// add some buttons to bottom toolbar just for demonstration purposes
grid.child(\'pagingtoolbar\').add([
\'->\',
{
text: \'Encode: \' + (encode ? \'On\' : \'Off\'),
tooltip: \'Toggle Filter encoding on/off\',
enableToggle: true,
handler: function (button, state) {
var encode = (grid.filters.encode !== true);
var text = \'Encode: \' + (encode ? \'On\' : \'Off\');
grid.filters.encode = encode;
grid.filters.reload();
button.setText(text);
}
},
{
text: \'Local Filtering: \' + (local ? \'On\' : \'Off\'),
tooltip: \'Toggle Filtering between remote/local\',
enableToggle: true,
handler: function (button, state) {
var local = (grid.filters.local !== true),
text = \'Local Filtering: \' + (local ? \'On\' : \'Off\'),
newUrl = local ? url.local : url.remote,
store = grid.view.getStore();
// update the GridFilter setting
grid.filters.local = local;
// bind the store again so GridFilters is listening to appropriate store event
grid.filters.bindStore(store);
// update the url for the proxy
store.proxy.url = newUrl;
button.setText(text);
store.load();
}
},
{
text: \'All Filter Data\',
tooltip: \'Get Filter Data for Grid\',
handler: function () {
var data = Ext.encode(grid.filters.getFilterData());
Ext.Msg.alert(\'All Filter Data\',data);
}
},{
text: \'Clear Filter Data\',
handler: function () {
grid.filters.clearFilters();
}
},{
text: \'Add Columns\',
handler: function () {
if (grid.headerCt.items.length < 6) {
grid.headerCt.add(createColumns(6, 4));
grid.view.refresh();
this.disable();
}
}
}
]);
//创建一个面板，用来存放grid，
var win = Ext.create(\'Ext.Window\', {
title: \'Grid Filters Example\',
height: 400,
width: 875,
layout: \'fit\',
items: grid
}).show();
store.load();
});