2

我正在尝试使用 ExtJS 构建搜索应用程序。我创建了虚拟表单来搜索个人详细信息。我有一个连接到 mysql DB 的 php 脚本。我能够将表单参数传递给 php 并能够在 msg 框中获取返回结果。但我不明白如何将它传递给在 MVC 的网格中存储和显示相同的内容。我试图将 php 的返回数据传递给存储，然后在控制器中调用 Grid (List.js)。仍然没有工作。onSearchButtonClick我已经展示了我用来执行此操作的所有代码。我有另一个疑问，在控制器的存储和功能中使用代理代码部分（即 url:app/scripts/Info.php）是否必不可少？因为我可以直接传递返回值来存储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':'suman@xyz.com'}}

这是控制器：

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...');
    }
});

我希望我已经提供了理解问题所需的信息。期待某种帮助。

4

1 回答 1

1

问题是您有两个商店实例，一个在网格中，一个在控制器中。如果您想要一个实例存储（就像您想要的那样），您有两个选择：

  1. 将其添加到您的应用程序
  2. 将 a 分配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);

希望这能让你走上正轨。

于 2013-01-07T18:17:16.283 回答