【问题标题】：ExtJS reloading store on button click event with different parameterExtJS在具有不同参数的按钮单击事件上重新加载存储
【发布时间】：2018-04-16 02:44:52
【问题描述】：

我是 ExtJs 的新手，我正在使用 ExtJs4。

现在如下图所示，有一个名为关键字的文本字段，我要做的是当我点击按钮时，它会将textfield的数据传递给servlet并在grid中显示结果记录。

现在我不知道该怎么做。我正在接收来自 servlet 的 JSON 数据响应，但不知道如何重新加载存储和刷新网格。

以下是我的商店和网格的代码。

Ext.define("Post", {
    extend: 'Ext.data.Model',
    proxy: {
        type: 'ajax',
        url: '/ezdi/searchServlet',
        method: 'POST',
        reader: {
            type: 'json',
            root: 'rows'
            //,totalProperty: 'totalCount'
        }
    },

    fields: [{
        name: 'docid',
        mapping: 'docid'
    }, {
        name: 'mrn',
        mapping: 'mrn'
    }, {
        name: 'fname',
        mapping: 'fname'
    }]
});

var gridDataStore = Ext.create('Ext.data.Store', {
    model: 'Post'
});

// Data store for grid end

Ext.define('Ezdi.Grid', {
    extend: 'Ext.grid.GridPanel',
    alias: 'widget.ezdigrid',
    initComponent: function() {
        var config = {
            store: gridDataStore,
            columns: [{
                header: "DocID",
                width: 100,
                sortable: true,
                dataIndex: 'docid'
            }, {
                header: "MRN",
                width: 100,
                sortable: true,
                dataIndex: 'mrn'
            }, {
                header: "FirstName",
                width: 100,
                sortable: true,
                dataIndex: 'fname'
            }],
            viewConfig: {
                forceFit: false,
                autoLoad: false
            },
            loadMask: true
        };
    }
});

【问题讨论】：

标签： servlets extjs4

【解决方案1】：

你可以使用：

{
    xtype: 'button',
    text: 'Search',
    handler: function() {
        store.clearFilter(); //clear previous search value
        var searchValue = Ext.getCmp("textFieldId").getValue(); //get new value 
        store.load().filter('jsonGridFielName', searchValue); //load filtered data
    }
}

对于多个textfield搜索：

//FILTERS
var searchValue1 = Ext.getCmp("textFieldId1").getValue(); //value1
var searchValue2 = Ext.getCmp("textFieldId2").getValue(); //value2
var noValue = "0000xxxx"; //no Value, for empty field, use value that you are sure it is not going to be searched!!!
var clear = store.clearFilter(); //shortcut

if (!searchValue1 && !searchValue2) {
    clear;
    store.load().filter("jsonGridFielName1", noValue);
} else if (searchValue1) {
    clear;
    store.load().filter('jsonGridFielName1', searchValue1);
    //...else if(searchValue n...)...
} else {
    clear;
    store.load().filter('jsonGridFielName2', searchValue2);
}

【讨论】：

很好，但现在的问题是我想根据用户要求对单个字段进行过滤。在我的示例中，我的字段是（关键字、mrn、docid、fname）。我想在每个这个字段上放置过滤器，我会在我的 html 中为它们添加文本字段。所以请也建议我这样做。
嘿！我猜 'jsonGridFieldName1' 和 'jsonGridFieldName2' 将是参数名称，我尝试在 servlet 中获取它。另外我不知道如何使用这些字段创建商店.....如果你这么说，那么我在这里发布我的完整代码，以便你可以帮助我更多..
jsonGridFieldName 将是网格面板列 dataIndex dataIndex:"name"，或存储字段名称，fields:[name:"name..." 女巫总是相同，如果不使用映射。
好的，现在我明白了，但我的过滤器字段不是我的网格的一部分，所以如何做到这一点，请检查我发布的答案中的代码.. 它不起作用......我想要什么要做的是，在按钮的单击事件中，应将文本字段中的值传递给 servlet，然后由 servlet 执行查询并将结果返回以存储并刷新网格
但我正在寻求解决这个问题......因为我正在努力解决它没有得到解决方案......所以请在查看我的答案后给我一些建议

【解决方案2】：

ezdigrid.js

// Data store for grid start
Ext.define("Post", {
    extend: 'Ext.data.Model',
    proxy: {
        type: 'ajax',
        url: '/ezdi/searchServlet',
        method: 'GET',
        reader: {
            type: 'json',
            root: 'rows'
            //,totalProperty: 'totalCount'
        }
    },

    fields: [{
        name: 'docid',
        mapping: 'docid'
    }, {
        name: 'mrn',
        mapping: 'mrn'
    }, {
        name: 'fname',
        mapping: 'fname'
    }]
});

var gridDataStore = Ext.create('Ext.data.Store', {
    // pageSize: 10,
    model: 'Post'
});

// Data store for grid end

Ext.define('Ezdi.Grid', {
    extend: 'Ext.grid.GridPanel',
    alias: 'widget.ezdigrid',
    initComponent: function() {
        var config = {
            store: gridDataStore,
            columns: [{
                //id:'ms',
                header: "DocID",
                width: 100,
                sortable: true,
                dataIndex: 'docid'
            }, {
                header: "MRN",
                width: 100,
                sortable: true,
                dataIndex: 'mrn'
            }, {
                header: "FirstName",
                width: 100,
                sortable: true,
                dataIndex: 'fname'
            }],
            viewConfig: {
                forceFit: false,
                autoLoad: false
            },
            loadMask: true
        }; // eo config object

        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));


        // call parent
        Ezdi.Grid.superclass.initComponent.apply(this, arguments);

        // load the store at the latest possible moment
        this.on({
            afterlayout: {
                scope: this,
                single: true,
                fn: function() {
                    this.store.load({
                        params: {
                            start: 0,
                            limit: 30
                        }
                    });
                }
            }
        });

    } // eo function initComponent

});

demo.html

//handler for button click event
fbar: [{
    xtype: 'button',
    text: 'Search',
    handler: function() {
        var value = Ext.getCmp('_keyword').getValue(); //_keyword is textField
        gridDataStore.load().filter('keywords', value);
    }
}]

MyServlet

keyword = request.getParameter("keywords");

//code for quesry processing

【讨论】：

【解决方案3】：

在您的model 中使用extraParams。

extraParams: {
    keywords: 'your-value'
}

将以下代码放入您的按钮单击处理程序中。

gridDataStore.proxy.extraParams.keywords = 'new value';
gridDataStore.load();

【讨论】：