Создание формы приложения поиска и отображение результата в сетке при отправке в extjs-mvc

Я пытаюсь создать поисковое приложение с помощью ExtJS. Я создал фиктивную форму для поиска личных данных. У меня есть php-скрипт, подключенный к базе данных mysql. Я могу передать параметры формы в php и получить результат возврата в окне msg. но я не понимаю, как передать его для хранения и отображения в сетке в MVC. Я попытался передать возвращаемые данные php для хранения, а затем вызвал Grid (List.js) в контроллере. все еще не работал. Я показал все коды, которые я использовал для этого. Еще одно сомнение, которое у меня есть, заключается в том, что необходимо использовать прокси-часть кода (т.е. url:app/scripts/Info.php) как в хранилище, так и в функции onSearchButtonClick в контроллере? поскольку я могу напрямую передавать возвращаемые значения в хранилище из функции onSearchButtonClick, я надеюсь, что нет необходимости подключать php-скрипт в обоих местах. Однако было бы очень хорошо, чтобы специалисты разъяснили это.

Ниже мой магазин:

Ext.define('App.store.Info', {
    extend: 'Ext.data.Store',
    model: 'App.model.Info',
    alias: 'widget.infostore',
    pageSize : 50,
    autoLoad : false,
    remoteFilter: true,
    proxy   :{
            type    : 'ajax',
            url     : 'app/scripts/Info.php',
            reader  : {
                    type    : 'json',
                    root    : 'result',
                    successProperty : 'success'
            }
    },
 listeners: {
     load : function(store) {
         store.each(function(record) {
            record.commit();
        });
     }
 }
 });

Моя модель выглядит идеально, просто чтобы уменьшить количество кода, который я здесь не разместил.

Вот моя сетка:

Ext.define('App.view.info.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.infolist',
store : 'Info',
initComponent: function(){
    this.columns = [
            {header:'PID',dataIndex:'pid'},
            {header:'Name',dataIndex:'name'},
            {header:'Address', dataIndex:'address'},
            {header:'Contact', dataIndex:'contact'}
    ];
    this.callParent(arguments);

}
});

Вот что возвращает мой php-скрипт:

{'success':true, 'result':{'pid':'100','name':'Suman','address':'Bangalore','contact':'[email protected]'}}

Вот контроллер:

Ext.define('App.controller.Info', {
    extend: 'App.controller.Base',
    models: ['Info'],
    stores: ['Info'],
    views: [
            'info.Index',
            'info.List'
            ],
    refs: [{ref: 'info',selector: 'info'}],
    init: function(){
            console.log('Main controller init');
            this.control({
                    'button[action=search]':{
                            click: this.onSearchButtonClick
                    }
            });
    },
    onSearchButtonClick:function(){
            var form = Ext.getCmp('ppanel');
            if(form.getForm().isValid()){
                    Ext.Ajax.request({
                            waitMsg: 'Searching...', 
                            method: 'POST',
                            url: 'app/scripts/Info.php',
                            params: {
                                    searchData: Ext.encode(form.getValues())
                            },
                            scope:this,
                            success: this.onSearchSuccess,
                            failure: this.onSearchFailure
                            //Ext.MessageBox.alert("XXXXX","dat");
                    });
            }
    },
    onSearchSuccess: function(response){
            var gData = Ext.JSON.decode(response.responseText);
            //var grid = Ext.widget('infolist');  //not working -need help
            this.getInfoStore().load(gData);
            //Ext.getCmp().setActiveItem('infolist');  //not working-need help
            //this.getViewport().getLayout().setActiveItem('infolist'); //not working need help
            Ext.MessageBox.alert("XXXXX",response.responseText); //works
    },
    onSearchFailure: function(err){
            Ext.MessageBox.alert('Status', 'Error occured during searching...');
    }
});

Надеюсь, я предоставил необходимую информацию для понимания проблемы. С нетерпением жду какой-то помощи.


person user1899905    schedule 13.12.2012    source источник
comment
Вы предоставили слишком много информации, постарайтесь сократить проблемное пространство, чтобы кто-то мог быстро понять и решить вашу проблему.   -  person akjoshi    schedule 13.12.2012


Ответы (1)


Проблема в том, что у вас есть два экземпляра магазина, один в сетке и один в контроллере. Если вам нужно хранилище с одним экземпляром (как кажется, вы хотите), у вас есть два варианта:

  1. Добавьте его в свое приложение
  2. Назначьте storeId определению вашего магазина.

(если вы уже добавили этот магазин в свое приложение, игнорируйте приведенный выше текст)

Или, еще лучше, работать не напрямую с магазином, а со своей сеткой, вот так:

Сначала добавьте ref в ваш вид-> сетку в вашем контроллере:

refs: [{ref: 'info',selector: 'info'},{selector:'infolist', ref:'infoGrid'}]

И тогда в вашем обработчике onSearchSuccess вместо вызова: this.getInfoStore().load(gData); следует вызывать: this.getInfoGrid().getStore().loadData(gData);

Кстати: this.getInfoStore().load(gData); никогда не будет загружать массив данных или запись, для этого вы должны использовать: this.getInfoStore().loadData(gData);

Надеюсь, это направит вас на правильный путь.

person VoidMain    schedule 07.01.2013