PDA

View Full Version : Window growing with EditorGridPanel & FormPanel



jasondeegan
1 Oct 2009, 6:02 AM
I'm combining an EditorGridPanel and a FormPanel in a new window.
However, the window is not growing down when I add rows to my GridPanel.

This is probably a quick / easy fix that I'm glossing over.

Thanks,

Jason



aEES2: function( subID ){
var conna = new Ext.data.Connection();
var carriersStore = new Ext.data.SimpleStore({
fields: ['carrierValue', 'carrierDisplay'],
data : Ext.listMgmtCarrier.options
});

Ext.form.Field.prototype.msgTarget = 'under';
var fsf = new Ext.ux.OrderedFormPanel({
labelWidth: 75, url:'save-form.php', bodyStyle:'padding:5px 5px 0; border-bottom:0px;', width:350, height:30, id:'fsf', region:'north',
items: [{
xtype:'textfield', width:220, name:'contactName', id:'contactName', fieldLabel: 'Name',
listeners: {
'change' : function(){
Ext.getCmp( 'anewSubWindow' ).setTitle( Ext.getCmp( 'contactName' ).getValue() );
}
}
}]
});
var contactDetailRecord = Ext.data.Record.create([
{name: 'category'}, {name: 'v'}, {name: 's'}, {name: 'phone'}, {name: 'i'}, {name: 'vid'}
]);
contactDetailStore = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({}, contactDetailRecord ),
url: '/rd/secure/scripts/contactDataGridFakeData.json',
sortInfo:{field: 'v', direction: "ASC"},
groupField:'category',
autoLoad:true
});
contactDetailGrid = new Ext.grid.EditorGridPanel({
store: contactDetailStore,
columns: [
{header: "category", id:'Category', width: 100, sortable: true, dataIndex: 'category', hidden:true },
{header: "Vendor", id:'v', width: 90, sortable: true, dataIndex: 'v' },
{header: "Store", width: 50, sortable: true, dataIndex: 's' },
{header: "Phone", width: 80, sortable: true, dataIndex: 'phone', editor: new Ext.form.TextField({ allowBlank: false }) },
{header: "Call", id:'bpCol', width: 25, resizable:true, sortable: true, dataIndex: 'i' , css: 'padding-left:0px; margin-left:0px; cursor: pointer; cursor: hand;' },
{header: "Id", width: 5, sortable: true, dataIndex: 'vid', hidden:true }
],
fill: true, region:'center', width:350, clicksToEdit:1, autoHeight:true, stripeRows: true, bodyStyle:'background-color:transparent; border-top:0px;', hideHeaders:true, ctCls: 'contactDetails',
view: new Ext.ux.noCollapseGroupingView({
forceFit:true,
groupTextTpl: '<table cellpadding=0 cellspacing=0 border=0 width=100%><tr><td style="width:99%;">{[ values.rs[0].data["category"] ]} </td><td style="width:24px; text-align:right;" class="clickGrp"><span class="{[ values.rs[0].data["category"] ]}"><img src="/rd/images/icons/addIcon.gif" style="cursor:pointer; cursor:hand;"></span></td></tr></table>'
})
});
contactDetailStore.load( );

Ext.Ajax.request({
method : 'POST',
url : '/rd/secure/dao/dao.php',
params : { 'action':'getSubscriberDataJSON', 'subId':subID },
success : function( response ){
o = Ext.decode( response.responseText );
var anewSubWin = Ext.getCmp('anewSubWindow');
if (!anewSubWin) {
anewSubWin = new Ext.Window({
id: 'anewSubWindow', title:'List Management', modal:true, width:410, height:350, y:80, plain:true, closable: false, bodyStyle:'padding:5px;', buttonAlign:'center', layout:'border', items: [ fsf, contactDetailGrid ],
buttons: [{
id:'btnSave',
text: 'Save',
handler: function(){
Ext.MessageBox.show({
msg: 'Creating Subscriber',
progressText: 'Saving',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'ext-mb-save'
});
subPanel.getForm().submit({
url:'/rd/dao/common/dao.php',
method:'POST',
success: function(form, action){
}
});
}
},{
text: 'Cancel',
handler: function(){
anewSubWin.destroy(true);
anewSubWin = null;
}
}]
});
}
Ext.getCmp( 'anewSubWindow' ).setTitle( o.contact );
anewSubWin.show();
},
failure: function( response ){
}
});
},

Animal
1 Oct 2009, 6:32 AM
You're going to have to refactor that at some point.

You have function which calls Ajax, which in a success handler creates buttons with an embedded hander...

You will end up in knots unless you create some logical classes.

Windows do not resize because of what you place in them. You will have to use a polling function which sets the Window's body's height to the Window's body's scrollHeight, and then call syncSize