extJS 4.2新手Q - 通过商店或网格循环

时间:2013-12-31 18:35:06

标签: arrays loops store extjs4.2

更新:我回答了我自己的问题。它可能是白痴解决方案,但我再也不相信框架工作是白痴证明。我的问题是我无法为我的商店启动加载事件。我在init函数之后但在this.control函数之前添加了以下行:

    init: function() {

    Ext.getStore('Users').addListener('load',this.onUsersStoreLoad, this);

    Ext.getStore('Users').addListener('datachanged',this. onUsersStoreDataChange, this);

    this.control(
    {


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


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


    });



},

onUsersStoreLoad: function(me,records,success)
{

// Do something ignorant with your code here
};

这适用于分页网格/商店或其他任何内容。如果这是处理我商店的加载事件的不好方法,请随时提出如何改进此建议。

谢谢, 更新结束:

我不能为上帝/国家的爱情图如何循环通过商店或网格。我是新手,虽然我认为最好循环通过反对网格的商店我似乎找到了办法。我已经阅读了几篇文章,人们似乎有同样的问题,并找到了解决方案。但是,当我尝试实现解决方案时,我在登录到控制台时遇到未定义的错误。很明显,我的理解是低于标准,因为我无法确定我是否将我的代码放在适当的位置。

我在SO中使用此链接作为我想要做的模型,我无法让它工作:

http:/stackoverflow.com/questions/3149107/how-to-loop-through-the-extjs-grid-object-to-get-its-elements-and-values

我想用数组禁用日期选择器中的日期。它在我硬编码时工作,但我真正想做的是用我的用户商店提供的网格的unix_time_stamp coloumn动态加载dateArray。我已经在消息框中尝试了存根,我可以做到这一点,我似乎无法解决这个问题,因此告诉我,我从根本上搞砸了。请帮忙。

查看:

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,
                    // submitFormat: 'd/m/Y',
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    field:{ xtype:'datefield',
                            autoSync:true,
                            allowBlank:false,
                            editor: new Ext.form.DateField(
                                    {format: 'm/d/y'})  }
                    }];



    this.callParent(arguments);


},

});

商店:

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.Loader.setConfig({enabled:true});

// This array is for testing.
dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];

// var disabledDates = [];
// var usersStore = Ext.getStore('User');
// console.log(usersStore);
// usersStore.store.each(function(record){
//  disabledDates.push(record.get(unix_time_stamp));
// });

Ext.application({     要求:['Ext.container.Viewport'],     名称:'AM',     appFolder:'app',     控制器:['用户'],

launch: function() {

    Ext.create('Ext.container.Viewport', {

    layout: 'border',

     items:
        [
            {

            region: 'center',
            //layout:'fit',
            title:'The Title',
            xtype: 'tabpanel', // TabPanel itself has no title
            activeTab: 0,      // First tab active by default
            items:
            [{
                xtype: 'userlist',
                listeners:
                {
                    select: function(selModel, record, index, options)
                    {
                        // do something with the selected date
                        // Ext.Msg.alert(record.data.message_id, record.data.recip_email +'<br> ' + record.data.unix_time_stamp);
                    }
                }
            }]

            },
            {
            region: 'west',
            layout:'fit',
            xtype: 'tabpanel',
            activetab:0,
            collapsible:false,
            split: false,
            title: 'The Title',

            width:178,
            maxWidth:400,
            height: 100,
            minHeight: 100,
            items:
            [
            {
                title: 'Tab 1',
                xtype:'panel',
                items:
                    [{
                    xtype: 'datepicker',
                    minDate: new Date('12/15/2013'),
                    maxDate: new Date(),
                    // Disable dates is set to invert dates in array
                    // disabledDates:["^(?!"+dateArray.join("|")+").*$"],
                    disabledDates:["^("+dateArray.join("|")+").*$"],

                    handler: function(picker, date)
                            {

                            // do something with the selected date
                            // Ext.Msg.alert('date picker example in init2.js' + '<br>' + Ext.Date.format(date,'m/d/Y'));

                            console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));

                            // get store by unique storeId
                            var store = Ext.getStore('Users');

                            // clear current filters
                             store.clearFilter(true);

                            // filter store
                            Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));

                            // store.proxy.extraParams = { key:'test'};
                            store.load();
                            // store.sync();

                            }
                    }]
            },
            {
                title: 'Tab 2',
                html: 'ers may be added dynamically  - Others may be added dynamically',
            }

            ]

            }
        ]

    });
}
});

1 个答案:

答案 0 :(得分:0)