PDA

View Full Version : Overflow in Tab Panel + Grid Maximum Width



Zyclops
22 Nov 2007, 8:09 PM
I've been playing for a while and I can't solve either of these issues:
http://farm3.static.flickr.com/2152/2056583030_3b5dd2b67c_o.jpg

If you take a look at the screenshot, the issues are:
1)When you decrease the size of the create email section, instead of doing something like "overflow: hidden" it resizes the contents. I've searched all through tabpanel and it's parents and can't find an option to change it.

2) The grid when resizing it's tab pane always stays at it's original size, i've tried layout fit on the tab panel but that didn't seem to work either.

Here's my code


create_form_with_data: function(record, options, success) {
var data = record[0].data;

//Ext.state.Manager.setProvider(new Ext.state.SessionProvider({state: Ext.appState}));
var new_email = new Ext.form.FormPanel({
tbar: [{
text:'Send Email',
tooltip:'Send',
iconCls:'email-send',
scope: this,
handler: function() { this.new_email.form.submit();}
}],
bodyStyle:'margin: 10px',
baseCls: 'x-plain',
labelWidth: 55,
url:'/student_profiles/send_email',
defaultType: 'textfield',
title: 'Create Email',
items: [
{
xtype: 'combo',
fieldLabel: 'From',
name: 'email[from]',
value: data.from_choices[0][0],
valueField: 'email_address',
displayField: 'name',
mode: 'local',
typeAhead: false,
store: new Ext.data.SimpleStore({
fields:['name', 'email_address'],
data: data.from_choices
}),
width: 490
},
{
fieldLabel: 'To',
name: 'email[display_to]',
disabled: true,
value: data.to,
width: 490
},
{
fieldLabel: 'CC',
name: 'email[cc]',
value: data.cc,
width: 490
},
{
fieldLabel: 'Subject',
name: 'email[subject]',
value: data.subject,
width: 490
}, {
xtype: 'textarea',
hideLabel: true,
name: 'email[content]',
value: data.content,
width: 550,
height: 230
},{
xtype: 'hidden',
name: 'email[student_id]',
value: data.student_id
},{
xtype: 'hidden',
name: 'email[email_type]',
value: data.email_type
},{
xtype: 'hidden',
name: 'email[to]',
value: data.to
}]
});
this.new_email = new_email; //So we can actually access the submit button in the handler

// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
enableTabScroll:true,
reziseTabs: true,
activeTab: 0,
defaults:{autoScroll:true},

items:[
new_email
]
});
Orbit.email.tab_panel = tabs;

// Panel for the west
var nav = new Ext.Panel({
title: 'History',
region: 'east',
split: true,
width: 220,
layout:'fit',
autoLoad: {url:'/student_profiles/email_history/' + data.student_id, text:'Loading History...',scripts: true},
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3'
});
nav.doLayout();


var win = new Ext.Window({
title: 'Email Student Reminder',
closable:true,
width: 800,
height: 450,
//border:false,
plain:true,
layout: 'border',

items: [nav, tabs]
});
win.show(this);
},

open_email: function(id,tab_title) {
Orbit.email.tab_panel.add({
title: tab_title,
autoLoad: {url:'/student_profiles/email/' + id, text:'Loading Email...',scripts: false},
closable:true
});
}

Zyclops
24 Nov 2007, 2:28 PM
* bump * - still haven't been able to resolve either of these issues

HCammus
24 Nov 2007, 2:36 PM
Hi, with the grid try to put the 100% width and height and the other put autoScroll:false

shibubh
24 Nov 2007, 8:12 PM
HI Zyclops

I NOTICED couple of thing in your code
In form panel


title: 'Create Email',
items: [
{
xtype: 'combo',
fieldLabel: 'From',
name: 'email[from]',
value: data.from_choices[0][0],
valueField: 'email_address',
displayField: 'name',
mode: 'local',
typeAhead: false,
store: new Ext.data.SimpleStore({
fields:['name', 'email_address'],
data: data.from_choices
}),
width: 490
},
{
fieldLabel: 'To',
name: 'email[display_to]',
disabled: true,
value: data.to,
width: 490
// ... more on the form panel

you used fixed width.
try anchor:'50%' // as per your requirement
so write the code like this


var new_email = new Ext.form.FormPanel({
tbar: [{
text:'Send Email',
tooltip:'Send',
iconCls:'email-send',
scope: this,
handler: function() { this.new_email.form.submit();}
}],
bodyStyle:'margin: 10px',
baseCls: 'x-plain',
labelWidth: 55,
url:'/student_profiles/send_email',
defaultType: 'textfield',
title: 'Create Email',
auotScroll:false
items: [
{
xtype: 'combo',
fieldLabel: 'From',
name: 'email[from]',
value: data.from_choices[0][0],
valueField: 'email_address',
displayField: 'name',
mode: 'local',
typeAhead: false,
store: new Ext.data.SimpleStore({
fields:['name', 'email_address'],
data: data.from_choices
}),
anchor:'95%'
},
{
fieldLabel: 'To',
name: 'email[display_to]',
disabled: true,
value: data.to,
anchor:'95%'
},
{
fieldLabel: 'CC',
name: 'email[cc]',
value: data.cc,
anchor:'95%'
},
{
fieldLabel: 'Subject',
name: 'email[subject]',
value: data.subject,
anchor:'95%'
}, {
xtype: 'textarea',
hideLabel: true,
name: 'email[content]',
value: data.content,
anchor:'95%',
height: 230
},{
xtype: 'hidden',
name: 'email[student_id]',
value: data.student_id
},{
xtype: 'hidden',
name: 'email[email_type]',
value: data.email_type
},{
xtype: 'hidden',
name: 'email[to]',
value: data.to
}]
});



For Grid i dont what you returned form the server, just make sure it has the 100% width or it doesnt have fixed width