Ayuda con extjs 4.2.2 soy nuevo en esto

时间:2014-10-27 17:07:37

标签: extjs

我试图制作说我的面板崩溃的酒吧但是我失败了......我是这个框架的新手我想给我一个解决方案..

Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',

    requires: [
        'Ext.toolbar.Toolbar',
        'Ext.button.Button',
        'Ext.grid.Panel',
        'Ext.grid.View',
        'Ext.grid.column.CheckColumn'
    ],

    autoShow: true,
    height: 401,
    width: 970,
    title: 'Linia de tiempo',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {   
            dockedItems:  [
               /* {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            xtype: 'button',
                            text: 'MyButton'
                        }
                    ]
                } */
            ], 
            items: [
                {
                    xtype: 'gridpanel',
                    title: '   ',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            width: 250,
                            text: 'Grado y Sección'
                        },
                        {
                            xtype: 'checkcolumn',
                            text: 'Inicio'
                        },
                        {
                            xtype: 'checkcolumn',
                            text: 'Indice'
                        },
                        {
                            xtype: 'checkcolumn',
                            text: 'Proyecto1'
                        },
                        {
                            xtype: 'checkcolumn',
                            text: 'Proyecto2'
                        },
                        {
                            xtype: 'checkcolumn',
                            text: 'Proyecto3'
                        },
                        {
                            xtype: 'checkcolumn',
                            text: 'Proyecto4'
                        },
                        {
                            xtype: 'checkcolumn',
                            text: 'Cierre'
                        }
                    ]
                },

                 { 
                    title :  'Collapsed Panel ' , 
                    collapsed:  true, 
                    collapsible :  true, 
                    anchura :  640 , 
                    //html :  KitchenSink . DummyText . MEDIUMTEXT , 
                    colspan :  3 
                 }, 

                {
                    xtype: 'panel',
                    collapseMode: 'standard',
                    collapsed: true,
                    collapsible: true,
                    autoScroll: true,
                    split:true,
                    title: 'My Panel'
                    html: '<iframe src="http://www.google.com" style="width:100%;height:100%;border:none;"></iframe>'   
                },

                /*{ 

                title :  'Collapsed Panel ' , 
                se derrumbó :  true , 
                plegable :  true , 
                ancho :  640 , 
                colspan :  3 
            } */
            ]
        }); 

        me.callParent(arguments);
    }

});

1 个答案:

答案 0 :(得分:0)

以下是您的问题的示例,

工作小提琴是here

Ext.define('MyApp.view.MyWindow', {
    //extend: 'Ext.panel.Panel',
    extend: 'Ext.window.Window',
    alias: 'widget.parentPanel',
    requires: ['Ext.toolbar.Toolbar', 'Ext.button.Button', 'Ext.grid.Panel', 'Ext.grid.View', 'Ext.grid.column.CheckColumn'],
    autoShow: true,
    height: 401,
    width: 520,
    style:'margin-top: 200px',
    title: 'Linia de tiempo',
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            dockedItems: [],
            items: [{
                xtype: 'gridpanel',
                title: ' ',
                columns: [{
                    xtype: 'gridcolumn',
                    dataIndex: 'string',
                    width: 250,
                    text: 'Grado y Sección'
                }, {
                    xtype: 'checkcolumn',
                    text: 'Inicio'
                }, {
                    xtype: 'checkcolumn',
                    text: 'Indice'
                }, {
                    xtype: 'checkcolumn',
                    text: 'Proyecto1'
                }, {
                    xtype: 'checkcolumn',
                    text: 'Proyecto2'
                }, {
                    xtype: 'checkcolumn',
                    text: 'Proyecto3'
                }, {
                    xtype: 'checkcolumn',
                    text: 'Proyecto4'
                }, {
                    xtype: 'checkcolumn',
                    text: 'Cierre'
                }]
            }, {
                xtype: 'panel',
                title: 'Collapsed Panel ',
                collapsed: false,
                collapsible: true,
                anchura: 640,
                colspan: 3,
                items:[{
                    xtype: 'textfield'
                },{
                    xtype: 'checkbox',
                    boxLabel: 'select',
                    boxLabelAlign: 'before'
                }]
            }, {
                xtype: 'panel',
                collapseMode: 'standard',
                collapsed: true,
                collapsible: true,
                autoScroll: true,
                split: true,
                title: 'My Panel',
                html: '<iframe src="http://www.google.com" style="width:100%;height:100%;border:none;"></iframe>'
            }]
        });
        me.callParent(arguments);
    }
});

Ext.widget('parentPanel', {renderTo: 'panel'});