Ayuda con extjs 4.2.2 soy nuevo en esto - extjs

Question

I'm trying to make the bar that says my panel to collapse but I failed ... I am new to this framework I would like to give me a solution ..
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);
}
});

Answer 1

Here is an example for your problem,
Working fiddle is 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'});