Extjs - 调用时加载网格

Question

我有表格和网格。用户必须在表单字段中输入数据，然后在网格中显示相关记录。我想实现一个搜索表单，例如：用户将输入学生的姓名和性别，然后将获得所有具有相同姓名和性别的学生的网格。

所以，我使用 ajax 将表单字段值发送到 PHP，然后创建一个 json_encode 将在网格存储中使用。

我真的不确定我的想法是否好。但我还没有找到其他方法。

问题是当我在商店中将 autoLoad 设置为 true 时，网格会自动填充所有数据 - 而不仅仅是用户要求的数据 -

所以，我知道我必须将 autoLoad 设置为 false，但结果未显示在网格中，即使它在 firebug 中成功返回！

我不知道该怎么办。

我的观点

{
    xtype: 'panel',
    layout: "fit",
    id: 'searchResult',
    flex: 7,
    title: '<div style="text-align:center;"/>SearchResultGrid</div>',
    items: [{
        xtype: 'gridpanel',
        store: 'advSearchStore',
        id: 'AdvSearch-grid',

        columns: [{
                xtype: 'gridcolumn',
                dataIndex: 'name',
                align: 'right',
                text: 'name'
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'gender',
                align: 'right',
                text: 'gender'
            }
        ],
        viewConfig: {
            id: 'Arr',
            emptyText: 'noResult'
        },
        requires: ['MyApp.PrintSave_toolbar'],
        dockedItems: [{
            xtype: 'PrintSave_tb',
            dock: 'bottom',

        }]
    }]
},

---

我的商店和模型

Ext.define('AdvSearchPost', {
    extend: 'Ext.data.Model',

    proxy: {
        type: 'ajax',
        url: 'AdvSearch.php',
        reader: {
            type: 'json',
            root: 'Arr',

            totalProperty: 'totalCount'
        }
    },

    fields: [{
        name: 'name'
    }, {
        name: 'type_and_cargo'
    }]
});


Ext.create('Ext.data.Store', {
    pageSize: 10,
    autoLoad: false,
    model: 'AdvSearchPost',
    storeId: 'AdvSearchPost'
});

---

我的控制器

xmlhttp.open("GET", "AdvSearch.php?search_name=" + search_name, true);
xmlhttp.send(null);

---

我的 PHP 脚本

 if (!$con) {
     throw new Exception("Error in connection to DB");
 }

 $query = "SELECT name, gender FROM students  WHERE name ILIKE '%$search_name%' ";
 $result = pg_query($query);
 while ($row = pg_fetch_array($result)) {
     $Arr[] = array('name' => $row[0], 'gender' => $row[1]);
 }
 $searchResult_list = array();
 $searchResult_list['success'] = true;
 $searchResult_list['Arr'] = $Arr;

 $searchResult_list['totalCount'] = count($searchResult_list['Arr']);

 echo json_encode($searchResult_list);


 if (!$result)
     die("Error in query: ".pg_last_error());



 pg_close($con);

Answer 1

好吧...我想我可以提供帮助，但这需要与您现在正在做的事情稍有不同的思路。

当您创建商店时，您为它提供了一个可用于进行 AJAX 调用的代理。它没有让它跟踪对定义的 url 的 ajax 调用。因此，当您定义您的商店并给它一个 id 时，它会在 store manager 中注册该商店的一个实例。然后，您应该使用该存储的代理将数据加载到其中，就像在您的控制器中一样：

控制器：

//Get a reference to the store that the view references
var store = Ext.data.StoreManager.lookup('advSearchStore');

//Load data into the store using it's configured proxy
store.load({
    params: {
        search_name: search_name
    }
});

假设一切都在代理中正确设置（看起来不错）并且服务器正确获取并响应请求，您设置的代理应该解码您的 Web 服务返回的 JSON 数据，将其解码为 javascript对象，获取 Arr 属性，并将每个项目转换为已定义模型的实例。然后它会自动将这些添加到网格中，您应该会得到预期的结果。

Answer 2

我不太确定我是否可以关注你...你如何过滤？似乎是在本地分页商店？

我建议您在商店中使用remoteFilter: true。您现在可以在服务器端强制执行至少一个过滤器参数，否则返回一个空结果集。

请注意，提交给服务器的过滤器属性如下所示：

Filters:[{property:"FieldName", value: "anyValue"}] // objectview