PDA

View Full Version : How can I achieve height and width of 100% here?



glafrance
10 Jul 2012, 1:14 PM
In the following code, the width is 100%, but the height is not 100%. How can I achieve height and width of 100% here?



Ext.Loader.setConfig({
enabled : true,
paths: {
'Ext': '/extjs4/src',
}
});
Ext.onReady(function(){
console.log('The DOM is ready.');
Ext.Ajax.request({
url: 'privilegeUIConfig.xml',
method: 'GET',
// Success handler for privileges call.
success:function(privilegeUI_result){
console.log('Call to get the data succeeded.');
//console.log(privilegeUI_result.responseText);
Ext.ComponentManager.get('rawCodeTA').setValue("Data returned from ajax call:\n\n" + privilegeUI_result.responseText);
Ext.ComponentManager.get('dummy').setValue("Data returned from ajax call:\n\n" + privilegeUI_result.responseText);
},
// Failure handler for privilege UI call.
failure:function(){
console.log('Call to get the data failed.');
Ext.ComponentManager.get('rawCodeTA').text = 'Call to get the data failed.';
}
});

Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
layout: 'hbox',
align: 'stretch',
items: [
{
xtype: 'textarea',
id: 'rawCodeTA',
flex: 1
},
{
xtype: 'textarea',
id: 'dummy',
flex: 1
}
]
}
]
});
});

jay@moduscreate.com
10 Jul 2012, 1:26 PM
Reformatted so it's actually readable: (No offense)



Ext.Loader.setConfig({
enabled : true,
paths : {
'Ext' : '/extjs4/src',
}
});
Ext.onReady(function() {
console.log('The DOM is ready.');
Ext.Ajax.request({
url : 'privilegeUIConfig.xml',
method : 'GET',
// Success handler for privileges call.
success : function(privilegeUI_result) {
console.log('Call to get the data succeeded.');
//console.log(privilegeUI_result.responseText);
Ext.ComponentManager.get('rawCodeTA').setValue("Data returned from ajax call:\n\n" + privilegeUI_result.responseText);
Ext.ComponentManager.get('dummy').setValue("Data returned from ajax call:\n\n" + privilegeUI_result.responseText);
},
// Failure handler for privilege UI call.
failure : function() {
console.log('Call to get the data failed.');
Ext.ComponentManager.get('rawCodeTA').text = 'Call to get the data failed.';
}
});

Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [
{
layout : 'hbox',
align : 'stretch',
items : [
{
xtype : 'textarea',
id : 'rawCodeTA',
flex : 1
},
{
xtype : 'textarea',
id : 'dummy',
flex : 1
}
]
}
]
});
});

jay@moduscreate.com
10 Jul 2012, 1:27 PM
change your layout to be:



layout : {
type : 'hbox',
align : 'stretch'
}

glafrance
10 Jul 2012, 1:31 PM
Thanks for your reply.

I've seen in some examples where the layout of an ExtJS container is set simply with:

layout: 'hbox'

So why do we need to wrap it in a layout config as you have done, in order to have the align config of stretch to be respected? Seems unnecessary and confusing.

jay@moduscreate.com
10 Jul 2012, 1:49 PM
It's not unnecessary, albeit i understand the confusing part.

setting a layout to a string allows the Container class to implement an instance of a container via the layout's "type" (think XType). This pattern does not allow you to configure it. Setting a Container's layout via an object, you can then use that object to configure properties for that new layout instance.