问题描述
我有窗口 ExtJS:
let height = Ext.getBody().getViewSize().height,width = Ext.getBody().getViewSize().width,store = Ext.create('CRM.store.MessageCenter.Messages.List');
Ext.define('CRM.window.MessageCenter.Messages.List',{
extend: 'Ext.window.Window',xtype: 'window',name: 'MessageCenter_Messages_List_Window',iconCls: 'mails',title: 'MessageCenter_Messages',width: width,height: height - 26,x: 0,y: 26,layout: 'fit',dockedItems: [{
xtype: 'pagingtoolbar',dock: 'bottom',displayInfo: true,extend: 'Ext.PagingToolbar',displayMsg: 'Shown {0} - {1} from {2}',emptyMsg: "There is no data to display",}],initComponent: function() {
var that = this;
that.store = store;
that.dockedItems[0].store = store;
this.callParent();
},items: [{
xtype: 'grid',name: 'MessageCenter_Messages_List_Grid',border: false,store: store,columns: [
{
text: 'ID',dataIndex: 'id',width: 100,hidden: false
},{
text: 'Date of creation',dataIndex: 'date',width: 150,xtype: 'datecolumn',format: 'd.m.Y H:i:s',],});
我的商店:
let name = 'CRM.store.MessageCenter.Messages.List';
Ext.define(name,{
extend: 'Ext.data.Store',autoLoad: true,pageSize: 35,fields: [
'id','date',sorters: [{
property: 'date',direction: 'DESC',proxy: {***},});
我需要添加过滤器以从数据库中选择数据。例如,按日期或 ID,但我不知道如何正确执行。以及是否有必要在我的情况下使用数据模型。请告诉我,我刚开始学习 ExtJS,谢谢你的帮助。
解决方法
没有必要使用数据模型(但它会很好)。 要使用用户定义的过滤器,您可以使用此 plugin。 AFAIK 您需要远程过滤器,因此将商店的“remoteFilter”属性设置为 true。类似于以下示例:
Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),title: 'Sci-Fi Television',height: 250,store: Ext.create('Ext.data.Store',{
fields: ['id','show'],model: 'User',proxy: {
type: 'ajax',url: 'data1.json',reader: {
type: 'json',rootProperty: 'items'
}
},autoLoad: true,remoteFilter: true,// Server side filtering.
}),plugins: 'gridfilters',columns: [{
dataIndex: 'id',text: 'ID',width: 50
},{
dataIndex: 'show',text: 'Show',flex: 1,filter: {
// required configs
type: 'string',// optional configs
value: 'star',// setting a value makes the filter active.
itemDefaults: {
// any Ext.form.field.Text configs accepted
}
}
}]
});
此示例将发送以下过滤器属性:
[{"operator":"like","value":"starrr","property":"show"}]