Question

当我点击日期选择器中的日期时，我可以看到请求被发送到我的服务器，进行查询，返回结果集，但我的网格似乎没有刷新....？！？！我一直在努力学习这个MVC模式框架工作，我无法相信学习曲线。似乎最简单的事情并不容易做到，当搜索网络时，有类似的帖子，但每一个都与我想做的有点不同，或者海报在不同的地方有代码或者他们没有使用MVC模式.....等等等等......等等

第一次访问我的服务器，用查询填充我的商店，因此网格成功 - 没有问题。此时，如果我从日期选择器中选择一个日期，则会对数据库进行调用，并使用我的JSON数据包发回请求 - 没问题。我验证了第一个请求中的JSON数据包与第二个和后续请求匹配，当使用chrome控制台和网络工具验证时，所有内容都在检查中。

非常感谢任何帮助。提前谢谢！

用户商店：

Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
    type: 'ajax',

    api:
    {
        read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
        update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
    },
    reader:
    {
        type: 'json',
        root: 'data',
        successProperty: 'success',
        totalProperty : 'dataset',
        remoteFilter : true
    },

    listeners:
    {
        // stuff goes here
    },
}

日期存储：

Ext.define('AM.store.dates', {
extend: 'Ext.data.Store',
model: 'AM.model.date',
autoLoad: true,
autoSync:true,
pageSize:1000,
proxy:
{
    type: 'ajax',
    api:
    {
        read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
        update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
    },
    reader:
    {
        type: 'json',
        root: 'data',
        successProperty: 'success',
        totalProperty : 'dataset',
        remoteFilter : true
    },

    listeners:
    {
        // stuff goes here
    }

用户模型：

Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: [
        {name: 'message_id',type: 'textfield'},
        {name: 'recip_email',type: 'textfield'},
        {name: 'unix_time_stamp',type:'datefield', dateFormat: 'Y-m-d H:i:s'}
        ]
});

日期模型：

    Ext.define('AM.model.date', {
extend: 'Ext.data.Model',
fields: [
        {name: 'message_id',type: 'textfield'},
        {name: 'recip_email',type: 'textfield'},
        {name: 'unix_time_stamp',type:'datefield', dateFormat: 'Y-m-d H:i:s'}
        ]
});

网格面板：

Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 1})],
dockedItems: [{ xtype: 'pagingtoolbar',
                store: 'Users',
                dock: 'bottom',
                displayMsg: 'Displaying Records {0} - {1} of {2}',
                displayInfo: true}],


initComponent: function() {

    this.columns = [
                    Ext.create('Ext.grid.RowNumberer',
                        {
                        resizable: true,
                        resizeHandles:'all',
                        align: 'center',
                        minWidth: 35,
                        maxWidth:50
                        }),
                    {
                    header: 'Name',
                    dataIndex: 'message_id',
                    flex: 1,
                    editor:'textfield',
                    allowBlank: false,
                    menuDisabled:true
                    },
                    {
                    header: 'Email',
                    dataIndex: 'recip_email',
                    flex: 1,
                    editor:'textfield',
                    allowBlank: false,
                    menuDisabled:true
                    },
                    {
                    header: 'Date Time',
                    dataIndex: 'unix_time_stamp',
                    width: 120,
                    menuDisabled:true,
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
                    field:{ xtype:'datefield',
                            editor: new Ext.form.DateField({format: 'Y-m-d'})  }
                    }];


    this.callParent(arguments);

}


});

的控制器： 的

    Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores:['Users', 'dates'],
models:['User', 'date'],
views: ['user.List','user.Edit'],


init: function() {

    Ext.getStore('dates').addListener('load',this.ondatesStoreLoad, this);

    this.control(
    {

        'viewport > userlist':
        {
            itemdblclick: this.editUser,
        },

        'useredit button[action=save]':
        {
            click: this.updateUser
        }           

    });

},


// ----------  handler Function declarations  -------------

ondatesStoreLoad: function(me,records,success)
{

// ------  Gets the dates from dates store and loads an array
var store = this.getStore('dates');
sendDataArray = [];

store.each(function(record){
    var recordArray = [record.get("unix_time_stamp")];
    sendDataArray.push(recordArray);
});         


// ------  Set DatePicker here  --------//

var dtFld = Ext.ComponentQuery.query('#datePickerFld')[0];

//dtFld.setDisabledDates(["^(?!"+sendDataArray.join("|")+").*$"]);
dtFld.setMaxDate(new Date());

var wstPnlReg = Ext.ComponentQuery.query('#westPanelRegion')[0];
wstPnlReg.show();

var ctrPnlReg = Ext.ComponentQuery.query('#centerPanelRegion')[0];
ctrPnlReg.show();

},


editUser: function(grid, record)
{
    var view = Ext.widget('useredit');
    view.down('form').loadRecord(record);
},

updateUser: function(button)
{
    var win    = button.up('window'),
        form   = win.down('form'),
        record = form.getRecord(),
        values = form.getValues();

    record.set(values);
    win.close();
    this.getUsersStore().sync();
},

});

JSON数据包：

{"success":true,"data":[{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:05","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:06","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:07","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:07","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:08","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:09","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:09","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:09","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:09","recip_email":"test@aol.com"},{"message_id":"M42712027","unix_time_stamp":"2013-09-26 00:08:09","recip_email":"test@aol.com"}],"dataset":10}

Answer 1

我刚刚快速提出了一个ExtJS 4.2 MVC应用程序的简单示例，该应用程序基于过滤器字段重新加载网格。 http://hutten.org/bill/extjs/2014/01/simple-extjs-42-mvc-example.html

使用DatePicker过滤后ExtJS4.Grid不刷新 - NewbieQ

1 个答案: