PDA

View Full Version : FormPanel shifts up after child List changes



247giants
29 Dec 2011, 10:33 AM
Hi:

I have a FormPanel with a list inside of it. When the FormPanel initially loads, the list could have 4 items in it. When I delete one of the items, the FormPanel refreshes and is shifted up slightly causing a gap at the bottom of the FormPanel.

Here's my code:






var selDefAccount = new Ext.form.Select(


{
xtype: 'selectfield',
id: 'selDefAccount',
name : 'defaultAccount',
label: 'Default Account',
valueField : 'id',
displayField : 'name',
store : app.stores.accounts,
listeners:{
change: function(select, value){
// Remove isDefault from other accounts
var model = new app.models.Account();
var proxy = model.getProxy();
var tablename = proxy.dbConfig.tablename;
var sql = 'UPDATE ' + tablename + ' SET isDefault = \'false\'';

proxy.queryDB(proxy.dbConfig.dbConn, sql,
function(tx, rs) {

// Set isDefault on selected account
var accountId = value;
var account = app.stores.accounts.getAt(app.stores.accounts.findExact('id', accountId));
var formval = {id: accountId, accountTypeId: account.get('accountTypeId'), name: account.get('name'), username: account.get('username'), password: account.get('password'), isDefault: 1};

Ext.ModelMgr.create(formval, 'app.models.Account', accountId).save();

},
function(tx, err){

Ext.Msg.alert('Oops...', 'There was a problem setting this as your default account.', Ext.emptyFn);
});


}
}
}
);


var listAccounts = new Ext.List({
xtype: 'list',
store: app.stores.accountsWithDefaultItem,
itemTpl: '<strong style="font-weight:bold;">{name}</strong><br /><small>{username}</small>',
indexBar: true,
onItemDisclosure: function(record) {


var id = record.getId();


if(id > 0){
Ext.dispatch({
controller: app.controllers.accounts,
action: 'show',
id: record.getId()
});
}
else {
Ext.dispatch({
controller: app.controllers.accounts,
action: 'chooseAccountType'
});
}
}
});


app.views.Settings = Ext.extend(Ext.form.FormPanel, {


dockedItems: [{
xtype: 'toolbar',
title: 'Settings',
items: [
{
id: 'back',
text: 'Back',
ui: 'back',
listeners: {
'tap': function() {
Ext.dispatch({
controller: app.controllers.accounts,
action: 'home'
});
}
}
}
]
}],
items: [{
xtype: 'fieldset',
title: 'Accounts',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items:[listAccounts]

} , {
xtype: 'fieldset',
title: 'Settings',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [selDefAccount]


}],
submitOnAction: false,
initComponent: function() {



// listAccounts.update();
app.views.Settings.superclass.initComponent.apply(this, arguments);
}
,
listeners: {
beforeactivate: function(panel) {
var accountsCount = app.stores.accounts.getCount();

// get the viewport
var viewport = panel.up();

// hide the bottom toolbar
var dockedItems = viewport.getDockedItems();

if(accountsCount == 0 && panel){

// set Account Type form to active
viewport.setActiveItem(app.views.accountTypeForm);

dockedItems[0].setVisible(false);
}
else{
dockedItems[0].setVisible(true);
}
}
}
});

mitchellsimoens
29 Dec 2011, 11:30 AM
What is the issue? What do you not want to happen?

247giants
29 Dec 2011, 11:38 AM
When I delete an item from the child list, I'd like my formpanel to not be shifted up. I have a title bar at the top and a toolbar docked at the bottom. After I delete an item, the title bar at the top is cut in half and the toolbar at the bottom has a big whitespace underneath it.

Achuaswani
5 Jan 2012, 12:20 AM
try with changing layout:'fit'..

247giants
10 Jan 2012, 8:22 PM
layout: 'fit' did not work either

247giants
12 Jan 2012, 8:09 AM
I did some more debugging by adding a border around the FormPanel and its parent Viewport panel (which has a card layout) and I found that the entire Viewport is shifting up.

I tried adding wrapping that Viewport with another Panel (using fit layout) and the shifting still happens.