VBOX Layout is not working / displaying / loading

[sridhar.boganathan]

Hi All,

As per my requirements, I need to have vbox with two grids, it should be with splitter to resize by users. I used VBOX Layout example in http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html to get an idea of VBOX and HBOX.

Ext.define('AccountDetails' ,{
extend: 'Ext.panel.Panel',
alias: 'widget.accdetails',
tbar: [{
xtype: 'button',
text: 'Create Account'
},{
xtype: 'button',
text: 'Delete Account'
}
],
layout: {
type: 'vbox'
},
items: [
{html:'Created Acconts', flex:1},
{html:'Remaining Account (Savings, Current & Credit Account)', height:150},
{html:'panel 3', flex:2}
],
initialize: function(){
console.log("Init Account Details");
}
});

But this is not displaying vbox and it is displaying toolbar. This component should be child of tab panel as per my requirements.

I have tried the above with two grid which did the same output as I mentioned. I have tried with flex, height, width, pack, and align. All of them gave me the same output as mentioned.

Please help me to find out what I am wrong with this.

In addition to the above, I need to change the vbox to hbox by code i.e., users should be able to change the view perspective. Suggest for this also.

-Sridhar

[vietits]

I have tested your code and it worked well on Chrome 18, Ext 4.0.7. What do you expect?


Ext.onReady(function(){


Ext.define('AccountDetails' ,{
extend: 'Ext.panel.Panel',
alias: 'widget.accdetails',
tbar: [{
xtype: 'button',
text: 'Create Account'
},{
xtype: 'button',
text: 'Delete Account'
}
],
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{html:'Created Acconts', flex:1},
{html:'Remaining Account (Savings, Current & Credit Account)', height:150},
{html:'panel 3', flex:2}
],
initialize: function(){
console.log("Init Account Details");
}
});


Ext.create('AccountDetails',{
renderTo: Ext.getBody(),
width: 200,
height: 300
});
});

[sridhar.boganathan]

I have tested your code and it worked well on Chrome 18, Ext 4.0.7. What do you expect?


Ext.onReady(function(){


Ext.define('AccountDetails' ,{
extend: 'Ext.panel.Panel',
alias: 'widget.accdetails',
tbar: [{
xtype: 'button',
text: 'Create Account'
},{
xtype: 'button',
text: 'Delete Account'
}
],
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{html:'Created Acconts', flex:1},
{html:'Remaining Account (Savings, Current & Credit Account)', height:150},
{html:'panel 3', flex:2}
],
initialize: function(){
console.log("Init Account Details");
}
});


Ext.create('AccountDetails',{
renderTo: Ext.getBody(),
width: 200,
height: 300
});
});


I have you tried to create object of this class and added to the tab as child.
I am facing the above problem only when I create object dynamically for the above defined class.

If I use this class directly as a child of viewport or using renderedTo: Ext.getBody(), then it will be working fine. I have a lot of classes (components / panels / tabs), which can be loaded dynamically by users.

Help me to find out solution for this.

-Sridhar

[vietits]

How do you create a panel of this class? And how do add it to your tabpanel?

[sridhar.boganathan]

How do you create a panel of this class? And how do add it to your tabpanel?


var accountDetails = Ext.create('AccountDetails', {});
accountDetailsConfig = {
custid: this.custid
};
accountDetails.setConfig(accountDetailsConfig);
customerTabs.add(accountDetails);
accountDetails.init();

This is my code to add this instance to the tab object as a tab child.

[vietits]

The following code works well also.


Ext.onReady(function(){

Ext.define('AccountDetails' ,{
extend: 'Ext.panel.Panel',
alias: 'widget.accdetails',
tbar: [{
xtype: 'button',
text: 'Create Account'
},{
xtype: 'button',
text: 'Delete Account'
}
],
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{html:'Created Acconts', flex:1},
{html:'Remaining Account (Savings, Current & Credit Account)', height:150},
{html:'panel 3', flex:2}
],
initialize: function(){
console.log("Init Account Details");
}
});


var customerTabs = Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 350,
items: [{
title: 'tab 1'
}]
});


var accountDetails = Ext.create('AccountDetails', {});
accountDetailsConfig = {
custid: this.custid
};
accountDetails.setConfig(accountDetailsConfig);
customerTabs.add(accountDetails);
accountDetails.init();


});