从 extjs 4 中的手风琴和网格获取价值

Posted

技术标签:

【中文标题】从 extjs 4 中的手风琴和网格获取价值【英文标题】:get value from accordion and grid in extjs 4 【发布时间】:2012-12-10 04:19:07 【问题描述】:

我想根据我的网格值的参数制作一个 pdf 报告。我想从手风琴标题中获取年份作为参数编号 1 和月份名称作为参数编号 2。但我无法做到。谁能帮我解决这个问题。下面是我的代码:

Ext.define('Ext4Example.view.attendence.Timeperiod' ,
    extend: 'Ext.form.Panel',
    alias : 'widget.timeperiod',
    id: 'timeperiod',
    region: 'west',
    border: true,
    width: 150,
    height:395,
    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,
        hideCollapseTool : true

    ,

    initComponent: function() 
        var me = this;
        me.items = me.maccord();
        me.callParent(arguments);
    ,
    mstore: function(year)
        var data = [
            [1,  year, 'January'  ],
            [2,  year, 'February' ],
            [3,  year, 'March'    ],
            [4,  year, 'April'    ],
            [5,  year, 'May'      ],
            [6,  year, 'June'     ],
            [7,  year, 'July'     ], 
            [8,  year, 'August'   ], 
            [9,  year, 'September'], 
            [10, year, 'October'  ], 
            [11, year, 'November' ], 
            [12, year, 'December' ]
        ];

        var store = Ext.create('Ext.data.ArrayStore', 
            storeId: 'mstore',
            fields: [              
                name: 'id', type: 'int',
                name: 'year', type: 'int',
                name: 'month', type: 'string'
            ],
            data:data
        );
        return store;
    ,
    mpanel: function(year)
        var me = this,
        mpanel = new Ext.grid.Panel(
            border: false,
            viewConfig: 
                stripeRows: true
            ,
            hideHeaders: true,
            columns: [
                 text: 'month',  dataIndex: 'month', flex: 1,
                 menuDisabled    : true,
                    sortable        : false,
                    xtype           : 'actioncolumn',
                    width           : 24,
                    items           : [
                            icon        : "$resource(dir: 'images', file: 'PDF01001.png')",
                            hide        : true,
                            tooltip     : 'Print PDF Report of this Month?',
                            handler     : function(record) 
                                          alert(record.data.month)
                            
                        ]
                
            ],
            listeners:
                selectionchange:function(model, records ) 
                    var store = Ext.data.StoreManager.lookup('Attendences');
                    var record = records[0];
                    store.load(
                        filters: [
                            property:'month', value:record.data.id,
                            property:'year', value:record.data.year
                        ]          
                    );                    
                
            ,
            store: me.mstore(year),
            width: 150
        );
        return mpanel;
    ,
    maccord: function()          
        var year = $(new Date()).format('yyyy'),
        limit = year - 5,
        me = this,
        maccord = [];

        for(year; year > limit ; year--)
            maccord.push(
                title: 'Year '+ year,
                ident: 'accordion-panel',
                items: me.mpanel(year)              
            );
        
        return maccord;
    
);

【问题讨论】:

【参考方案1】:

月份和年份在您的记录中。您不需要从手风琴标题中获取年份。您的问题是,记录不是处理程序中的第一个参数:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Action-cfg-handler

items: [
   icon: 'test',
   tooltip: 'Print PDF Report of this Month?',
   scope: this,
   handler: function(view, rowIndex, colIndex, item, e, record) 
        alert(record.data.month + "/" + record.data.year);
   
]

你可以看看:http://jsfiddle.net/AMx6r/1279/

【讨论】:

以上是关于从 extjs 4 中的手风琴和网格获取价值的主要内容,如果未能解决你的问题,请参考以下文章

Ext JS 3.4 延迟渲染手风琴 - 面板的强制渲染

组合框 Extjs 中的 fieldLabel

垫子扩展面板中的 ag 网格 / 垫子手风琴

Extjs 手风琴动态关闭所有面板

ext.js 网格内部手风琴:如何将网格标题设置为手风琴的

使用 extJS 从网格面板中获取价值