Ext.js5带过滤功能的表格(defaultListenerScope 作用域)（17）
view
/**
* This example illustrates how to use the "gridfilters" plugin.
* 这个例子演示怎么使用“gridfilters”插件
*/
Ext.define('KitchenSink.view.grid.GridFiltering', {
extend: 'Ext.grid.Panel',
xtype: 'grid-filtering',
requires: [
'Ext.grid.filters.Filters',
'KitchenSink.store.Products'
],
//第三种引用store的方法，1、store别名 2、在innitComponent中new一个 3、requires
//过滤功能需要引用Ext.grid.filters.Filters类
title: 'Products',
collapsible: true,
iconCls: 'icon-grid',
frame: true,
width: 700,
height: 500,
resizable: true,
plugins: 'gridfilters',//声明插件
emptyText: 'No Matching Records',
//loadMask(布尔值或者对象) true 或@link Ext.LoadMask}配置，使加载掩盖隐藏，默认是false
loadMask: true,
stateful: true,
// 设置stateId让表格的状态得到保持
stateId: 'stateful-filter-grid',
store: {
type: 'products',
url: 'resources/data/grid/grid-filter.json',
autoLoad: true,
//如果为true，容器会自动销毁包含的任何组件被删除它，否则必须手动销毁。默认是true
autoDestroy: true
},
// Dispatch named listener and handler methods to this instance
defaultListenerScope: true,
tbar: [{
text: 'Show Filters...',
tooltip: 'Show filter data for the store',
handler: 'onShowFilters'
}, {
text: 'Clear Filters',
tooltip: 'Clear all filters',
handler: 'onClearFilters'
}],
columns: [{
dataIndex: 'id',
text: 'Id',
width: 50,
// Specify that this column has an associated Filter. This is
// processed by the gridfilters plugin. If this is a string,
// this is the type of filter to apply.
//指定这一列都有一个关联的过滤器。这是处理gridfilters插件。如果是字符串则指的是使用的过滤器类型。
filter: 'number'
}, {
dataIndex: 'company',
text: 'Company',
flex: 1,
// As an object, the type property indicates the type of filter to
// apply. All other properties configure that filter instance.
// 配置过滤器实例
filter: {
type: 'string',
itemDefaults: {
emptyText: 'Search for...'
}
}
}, {
dataIndex: 'price',
text: 'Price',
width: 90,
formatter: 'usMoney',
filter: 'number'
}, {
dataIndex: 'size',
text: 'Size',
width: 120,
filter: 'list' // Use the unique field values for the pick list
}, {
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date',
width: 120,
filter: true // use dataIndex first then fallback to column type
}, {
dataIndex: 'visible',
text: 'Visible',
width: 80,
filter: 'boolean'
}],
onClearFilters: function () {
// The "filters" property is added to the grid (this) by gridfilters
this.filters.clearFilters();
},
onShowFilters: function () {
var data = [];
// The actual record filters are placed on the Store.
this.store.getFilters().each(function (filter) {
data.push(filter.serialize());
});
// Pretty it up for presentation
data = Ext.JSON.encodeValue(data, '\n').replace(/^[ ]+/gm, function (s) {
for (var r = '', i = s.length; i--; ) {
r += ' ';
}
return r;
});
data = data.replace(/\n/g, '
');
Ext.Msg.alert('Filter Data', data);
}
});关于defaultListenerScope 来自黄灯桥的博客，地址：http://blog.csdn.net/tianxiaode/article/details/39206763
defaultListenerScope
作用域解析有两种结果：组件或视图控制器（ViewController）。无论是哪种结果，都会从组件开始搜索。作用域可能是组件，也可能是视图控制器，如果不是，框架会“爬”到组件的上层直到找到适合的组件或视图控制器。
1、作用域解析为组件
框架解析作用域的第一种方式是寻找defaultListenerScope配置项为true的组件。对于类中的事件监听声明，搜索会从组件自身开始。
Ext.define('MyApp.view.user.User', {
extend: 'Ext.panel.Panel',
xtype: 'user',
defaultListenerScope: true,
listeners: {
save: 'onUserSave'
},
onUserSave: function() {
console.log('user saved');
}
}); 在当前示例，用户视图将defaultListenerScope设置为了true，那当前监听的作用域将会被解析为用户视图。
对于事件监听被声明在实例配置项的情况，将会条过组件自身，框架会从父容器开始搜索，请参考以下代码：
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
defaultListenerScope: true,
//实例中设置监听
items: [{
xtype: 'user',
listeners: {
remove: 'onUserRemove'
}
}],
onUserRemove: function() {
console.log('user removed');
}
}); 对于用户视图的监听是在实例的配置对象中声明的，这意味着框架会跳过用户视图（尽管它定义了defaultListenerScope为true），且会解析为主视图。
2、作用域解析为视图控制器
与Ext.app.Controller可以管理许多视图不同，每一个视图控制器实例只能绑定一个视图实例。视图与视图控制器之间之间一对一的关系允许视图控制器作为视图或视图的条目中事件监听声明的默认作用域。
对于defaultListenerScope，规则同样适用于视图控制器。类层的监听总是会在搜索组件的上层之前先搜索组件自身的视图控制器。
Ext.define('MyApp.view.user.User', {
extend: 'Ext.panel.Panel',
controller: 'user',
xtype: 'user',
listeners: {
save: 'onUserSave'
}
});
Ext.define('MyApp.view.user.UserController', {
extend: 'Ext.app.ViewController',
alias: 'controller.user',
onUserSave: function() {
console.log('user saved');
}
}); 上述监听被声明在用户视图的类主体内，由于用户视图有它自己的控制器，框架会解析作用域为UserController。如果用户视图没有自己的控制器，那么作用域会解析到上层。
另一方面，实例层监听会跳过组件并解析为视图控制器上层的父容器，例如：
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
controller: 'main',
items: [{
xtype: 'user',
listeners: {
remove: 'onUserRemove'
}
}]
});
Ext.define('MyApp.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onUserRemove: function() {
console.log('user removed');
}
}); store
Ext.define('KitchenSink.store.Products', {
extend: 'Ext.data.Store',
alias: 'store.products',
model: 'KitchenSink.model.grid.Product',
proxy: {
type: 'ajax',
url: 'resources/data/grid/grid-filter.json',
reader: {
type: 'json',
rootProperty: 'data',
idProperty: 'id',
totalProperty: 'total'
}
},
//设置为 true 则将所有的排序操作推迟到服务器. 如果设置为 false, 则在客户端本地排序.
remoteSort: false,
//应用于当前Store的排序器集合
sorters: [{
property: 'company',
direction: 'ASC'//升序
}],
pageSize: 50
});model
Ext.define('KitchenSink.model.grid.Product', {
extend: 'KitchenSink.model.Base',
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'
}]
});