ExtJS перезагружает магазин при нажатии кнопки с другим параметром

Я новичок в ExtJs и использую ExtJs4.

Теперь, как показано на изображении ниже, есть одно текстовое поле с именем keywords. Что я хочу сделать, так это когда я нажму на кнопку, он передаст данные textfield сервлету и отобразит результирующую запись в grid.

введите здесь описание изображения

Теперь я понятия не имею, как это сделать. Я получаю ответ данных 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
person mahesh    schedule 16.06.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Вы можете использовать:

{
    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);
}
person Davor Zubak    schedule 16.06.2011
comment
это нормально, но теперь проблема в том, что я хочу установить фильтр для отдельного поля на основе требований пользователя. В моем примере мои поля (ключевые слова, mrn, docid, fname). Я хочу поместить фильтр в каждое это поле, и я добавлю текстовое поле для них в свой html.. поэтому, пожалуйста, предложите мне это.. - person mahesh; 17.06.2011
comment
Привет ! Я предполагаю, что «jsonGridFieldName1» и «jsonGridFieldName2» будут именем параметра, которое я пытаюсь получить в сервлетах. Также я не знаю, как я могу создать магазин, используя эти поля ..... Если вы так говорите, я публикую здесь свой полный код, чтобы вы могли мне больше помочь. - person mahesh; 17.06.2011
comment
jsonGridFieldName будет столбцами gridpanel dataIndex dataIndex:name или хранит имена полей, fields:[name:name... ведьмы всегда одинаковы, если не используется сопоставление. - person Davor Zubak; 17.06.2011
comment
хорошо, теперь я понял, но мое поле фильтра не является частью моей сетки, так как это сделать, пожалуйста, проверьте код в ответе, который я разместил ... он не работает ... Что я хочу сделать, так это событие клика кнопки значение в текстовом поле должно быть передано сервлету, который затем выполнит запрос и вернет результат обратно для сохранения и обновления сетки - person mahesh; 17.06.2011
comment
но я хочу решить эту проблему ... так как я изо всех сил стараюсь, не получая решения ... так что, пожалуйста, предложите мне что-нибудь, посмотрев на мой ответ - person mahesh; 17.06.2011

arrow_upward
2
arrow_downward

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

});

демо.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);
    }
}]

МойСервлет

keyword = request.getParameter("keywords");

//code for quesry processing
person mahesh    schedule 17.06.2011

arrow_upward
2
arrow_downward

Используйте extraParams в своем model.

extraParams: {
    keywords: 'your-value'
}

Поместите следующий код в обработчик нажатия кнопки.

gridDataStore.proxy.extraParams.keywords = 'new value';
gridDataStore.load();
person Kunal    schedule 23.06.2011