PDA

View Full Version : Load data from store in formfields within tabbar layout



martinbroos
7 Jun 2011, 1:02 AM
Hi,

Might be something easy but i can't get the record data loaded up in my form fields on the edit screen.
The problem is that its within a tabbar layout. Where the UpdateWithRecord function doesn't seem to work.

Note that the fields that are directly within tpl do get updated.

Anyone knows what i'm doing wrong.

My full view code :



//Detail page
beheerpaneel.views.PagesDetail = Ext.extend(Ext.TabPanel, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
defaults: {
scroll: 'vertical',
},
dockedItems: [{
xtype: 'toolbar',
title: 'Pagina Details',
dock: 'top',
ui: 'light',
defaults: {
iconMask: true,
ui: 'plain'
},
items: [
{
xtype: 'button',
text: 'Terug',
ui: 'back',
listeners: {
'tap': function () {
Ext.dispatch({
controller: beheerpaneel.controllers.Pages,
action: 'index',
animation: {type:'slide', direction:'down'}
});
}
}
}]
}],
styleHtmlContent:true,
items: [
{
title: 'Bewerken',
cls: 'tabBewerken',
xtype: 'form',
id:'pageForm',
items: [{
xtype: 'textfield',
name: 'title',
label: 'Titel',
disabled: true
},{
xtype: 'togglefield',
name: 'inMenu',
label: 'In Menu'
},
{
xtype: 'textareafield',
name: 'notitie',
label: 'Pagina Notitie',
placeHolder: 'Plaats hier notities voor verbeteringen, fouten of ideeën. Deze worden getoond in beheerpaneel op de desktop pc zodat deze verwerkt kunnen worden in de tekst.',
useClearIcon: true
}]
},
{
title: 'Bekijken',
tpl: '{content}',
cls: 'tabBekijken'
},
],
// Update Items with data from model
updateWithRecord: function(record) {

Ext.each(this.items.items, function(item) {

//fill form
var form = Ext.getCmp('pageForm');
form.load(record.data);

//update Content screen
item.update(record.data);
});

//Update toolbar with title and edit id call
var toolbar = this.getDockedItems()[0];
toolbar.setTitle('Details: ' + record.get('title'));
//toolbar.getComponent('edit').record = record;
}

});

martinbroos
9 Jun 2011, 1:55 AM
Still can't get it to work. When my page is only a form i can load the model data in it with this.load(record) in the update with record function. But this doens't seem to work cause this is now a tabbar view.

I realy feel like Sencha is working against me... but i properly missing the bigger picture of the framework.

ideas?



items: [
{
title: 'Bewerken',
cls: 'tabBewerken',
xtype: 'form',
id:'pageForm',
items: [{
xtype: 'textfield',
name: 'title',
label: 'Titel',
disabled: true
},{
xtype: 'togglefield',
name: 'inMenu',
label: 'In Menu'
},
{
xtype: 'textareafield',
name: 'notitie',
label: 'Pagina Notitie',
placeHolder: 'Plaats hier notities voor verbeteringen, fouten of ideeën. Deze worden getoond in beheerpaneel op de desktop pc zodat deze verwerkt kunnen worden in de tekst.',
useClearIcon: true
}]
},
{
title: 'Bekijken',
tpl: '{content}',
cls: 'tabBekijken'
},
],
// Update Items with data from model
updateWithRecord: function(record)
{
//fill form
var form = Ext.getCmp('pageForm');

console.log(form);

//form.load(record); DOESNT't work

Ext.each(this.items.items, function(item) {

//update Content screen
item.update(record.data);
});

//Update toolbar with title and edit id call
var toolbar = this.getDockedItems()[0];
toolbar.setTitle('Details: ' + record.get('title'));
//toolbar.getComponent('edit').record = record;
}