使用的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,
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
},
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,
875,
layout: 'fit',
items: grid
}).show();
store.load();
});