2

我正在开发一个用于员工出勤的模块。我正在使用手风琴,它将显示年份的名称作为标题。在每个手风琴细节中,我都放置了一个包含月份名称的网格。我可以在控制器中获取网格值,但无法获取手风琴标题的名称,这就是为什么我无法在网格中显示所需结果的原因。谁能帮助我获得手风琴标题的标题?我的手风琴细节如下:

Ext.define('Ext4Example.view.attendence.Timeperiod' ,{
        extend: 'Ext.form.Panel',
        alias : 'widget.timeperiod',
        id: 'timeperiod',
        region: 'west',
        border: false,
        width: 150,
        height:400,
        split: true,
        defaults: {
            // applied to each contained panel
            //bodyStyle: 'padding:15px'
        },
        layout: {
            // layout-specific configs go here
            type: 'accordion',
            titleCollapse: true,
            animate: true,
            activeOnTop: true
        },

        initComponent: function() {

            var today = new Date();
            var yyyy = today.getFullYear();

            this.items = [{
                title: 'Year '+yyyy,
                items: [{
                xtype: 'months'
                }]
                //html: 'Panel content!'
            },{
                title: 'Year '+(yyyy-1),
                items: [{
                xtype: 'months'
                }]
                //html: 'Panel content!'
            },{
                title: 'Year '+(yyyy-2),
                items: [{
                xtype: 'months'
                }]
                //html: 'Panel content!'
            },{
                title: 'Year '+(yyyy-3),
                items: [{
                xtype: 'months'
                }]
                //html: 'Panel content!'
            },{
                title: 'Year '+(yyyy-4),
                items: [{
                xtype: 'months'
                }]
                //html: 'Panel content!'
            }];

            this.callParent(arguments);
        }
    });

我的月份网格如下:

Ext.define('Ext4Example.view.attendence.Months' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.months',
    border: false,
    viewConfig: {
        stripeRows: true
    },
     store: 'Months',    
    hideHeaders: true,
    initComponent: function() {        
        this.store = 'Months';
        this.width = 150;      
        this.columns = [
        {
            dataIndex: 'months', 
            flex:1
        }
        ];
        this.callParent(arguments);
    }
});

我的数据网格如下:

Ext.define('Ext4Example.view.attendence.Datagrid' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.datagrid',
    layout: 'fit',
    viewConfig: {
        stripeRows: true
    },

    hideHeaders: false,
    initComponent: function() {  
        this.store = 'Attendences';
        //this.width = 400;      
        this.columns = [
        {
            text: 'Date',
            dataIndex: 'id'
        },
        {
            text: 'In-Time',
            dataIndex: 'intime'
        },
        {
            text: 'Out-Time',
            dataIndex: 'outtime'
        }


        ];

        this.callParent(arguments);
    }
});

我将所有内容加在一起的主窗口如下所示:

Ext.define('Ext4Example.view.attendence.Attendencewindow' ,{
    extend: 'Ext.window.Window',
    alias: 'widget.attendencewindow',
    title: 'Attendence Information',
    layout: 'fit',
    modal: true,
    autoShow: true,
    resizable: false,
    //maximizable: true,
    collapsible: true,
    initComponent: function () {
        this.items = [
        {
            xtype: 'form',
            width: 550,
            bodyPadding: '8 0 8 0',
            border:false,
            layout: {
            type: 'hbox',
            align: 'stretch'
            },
            items:[{
            xtype: 'timeperiod'
            },{
            xtype: 'datagrid'
            }]
        }
        ];
        this.buttons = [

        {
            xtype: 'button',
            text: 'New',
            iconCls: 'new',
            action : 'clear'

        },{
            xtype: 'button',
            text: 'Save',
            iconCls: 'save',
            //iconAlign: 'top',
            action : 'save'


        },{
            xtype: 'button',
            text: 'Print',
            iconCls: 'print',
            action: 'close'
            //scope: this

        }
        ];
        this.callParent(arguments);
    }
});

我的控制器如下:

    Ext.define('Ext4Example.controller.Attendences', {
    extend: 'Ext.app.Controller',
    stores: [
    'Attendences','Months'
    ],
    models: [
    'Attendence','Month'
    ],
    views: [
    'attendence.Timeperiod','attendence.Details','attendence.Attendencewindow','attendence.Editattendence','attendence.Months','attendence.Datagrid'
    ],

    refs: [{
        ref: 'stockaddForm',
        selector: 'form'
    }],

    init: function () {
        this.control({
            'datagrid': {
                itemdblclick: this.editUser
            },
            'months': {
                itemclick: this.show
            },
            'attendencewindow button[action=save]': {
                click: this.save
            }

        });
    },

    editUser: function(grid, record){
        var view = Ext.widget('editattendence');
        view.down('form').loadRecord(record);
    },
    show: function(grid, record) {
    var hi = grid.ownerCt.title;
        alert(hi);
        var a = Ext.getCmp('timeperiod');
        var store = this.getAttendencesStore();
        store.load({
            filters: [
              {property:'month', value:record.data.value},
              {property:'year', value:2012}
            ]          
        });

},

save: function(){
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();     //+1
        Ext.Msg.alert("Today is - ",dd+" - "+mm+" - "+yyyy);
}
});

现在你能告诉我如何获得手风琴的标题,如 2012 年或 2011 年我可以通过 record.data.value 获得月份名称,但我不能获得手风琴的标题

请帮忙

4

1 回答 1

2

假设您已将自己注册到网格的itemclick事件,然后将网格本身作为回调中的第一个参数。您现在网格直接嵌套在您的手风琴中,因此您可以简单地引用ownerCt

//lets pretend this is your callback
function(grid,record) {
    grid.ownerCt.title; // <- your accordion title
}

您还应该看看up()ansdown()两者都需要一个组件查询选择器。但在你的情况下,这似乎是最好的方法。

编辑

这是修改后的timeperiod

Ext.define('Ext4Example.view.attendence.Timeperiod' ,{
        extend: 'Ext.form.Panel',
        alias : 'widget.timeperiod',
        id: 'timeperiod',
        region: 'west',
        border: false,
        width: 150,
        height:400,
        split: true,
        defaults: {
            // applied to each contained panel
            //bodyStyle: 'padding:15px'
        },
        layout: {
            // layout-specific configs go here
            type: 'accordion',
            titleCollapse: true,
            animate: true,
            activeOnTop: true
        },

        initComponent: function() {

            var today = new Date();
            var yyyy = today.getFullYear();

            this.items = [{
                title: 'Year '+yyyy,
                ident: 'accordion-panel',
                items: [{
                xtype: 'months'
                }]
                //html: 'Panel content!'
            },{
                title: 'Year '+(yyyy-1),
                ident: 'accordion-panel',
                items: [{
                xtype: 'months'
                }]
                //html: 'Panel content!'
            },{
                title: 'Year '+(yyyy-2),
                ident: 'accordion-panel',
                items: [{
                xtype: 'months'
                }]
                //html: 'Panel content!'
            },{
                title: 'Year '+(yyyy-3),
                ident: 'accordion-panel',
                items: [{
                xtype: 'months'
                }]
                //html: 'Panel content!'
            },{
                title: 'Year '+(yyyy-4),
                ident: 'accordion-panel',
                items: [{
                xtype: 'months'
                }]
                //html: 'Panel content!'
            }];

            this.callParent(arguments);
        }
    });

和修改后的Controller

Ext.define('Ext4Example.controller.Attendences', {
    extend: 'Ext.app.Controller',
    stores: [
    'Attendences','Months'
    ],
    models: [
    'Attendence','Month'
    ],
    views: [
    'attendence.Timeperiod','attendence.Details','attendence.Attendencewindow','attendence.Editattendence','attendence.Months','attendence.Datagrid'
    ],

    refs: [{
        ref: 'stockaddForm',
        selector: 'form'
    }],

    init: function () {
        this.control({
            'datagrid': {
                itemdblclick: this.editUser
            },
            'months': {
                itemclick: this.show
            },
            'attendencewindow button[action=save]': {
                click: this.save
            }

        });
    },

    editUser: function(grid, record){
        var view = Ext.widget('editattendence');
        view.down('form').loadRecord(record);
    },
    show: function(grid, record) {
    var hi = grid.up('[ident=accordion-panel]');
        alert(hi.title);
        var a = Ext.getCmp('timeperiod');
        var store = this.getAttendencesStore();
        store.load({
            filters: [
              {property:'month', value:record.data.value},
              {property:'year', value:2012}
            ]          
        });

    },

    save: function(){
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth()+1; //January is 0!
            var yyyy = today.getFullYear();     //+1
            Ext.Msg.alert("Today is - ",dd+" - "+mm+" - "+yyyy);
    }
});
于 2012-11-21T07:28:41.617 回答