PDA

View Full Version : how to instantiate a formpanel when the form is a docked item in extjs



Anthony.Hall
9 Jan 2012, 3:12 AM
Very new to extjs 4.0. So i could be phrasing this incorrectly.

I have a layout with a series of nested panels. One of these panels is a form panel which i intend to use loadRecord to fill with data. Most examples i've seen using something like the following to load the records.

testForm.getForm().loadRecord(app.formStore);


However you will see below that my formpanel is nested. So how do i load the form in order to load record


title: 'Job Summary',
items: [
{
xtype: 'form',
id: 'formJobSummary',
layout: {
align: 'stretch',
type: 'hbox'
},
bodyPadding: 10,
title: '',
url: '/submit.html',
flex: 1,
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Submit'
},
{
xtype: 'button',
text: 'Cancel'
}
]
}
],
items: [
{
xtype: 'panel',
flex: 1,
items: [
{
xtype: 'radiogroup',
width: 400,
fieldLabel: 'Job Type',
items: [
{
xtype: 'radiofield',
boxLabel: 'Fix Price'
},
{
xtype: 'radiofield',
boxLabel: 'Production'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Quoted Price'
},
{
xtype: 'textfield',
fieldLabel: 'Client PO'
},
{
xtype: 'textfield',
fieldLabel: 'Job Quatity'
},
{
xtype: 'textfield',
fieldLabel: 'Files Over'
},
{
xtype: 'textfield',
fieldLabel: 'Previous JobId'
},
{
xtype: 'textfield',
fieldLabel: 'Estimate'
}
]
},
{
xtype: 'panel',
flex: 1
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1
}
]
}
]
},

findajit
9 Jan 2012, 5:05 AM
Here is the code showing how to do this:


Ext.onReady(function(){

Ext.tip.QuickTipManager.init();

Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: ['first', 'last']
});

var user = Ext.create('UserModel', {
first: 'Ajit',
last: 'Kumar'
});

var form = Ext.create('Ext.form.Panel', {

id: 'my-form',

title: 'Simple Form',
bodyPadding: 5,
width: 350,

layout: 'anchor',
defaults: {
anchor: '100%'
},

// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],

// Reset and Submit buttons
buttons: [{
text: 'Reset',
tooltip : 'my Button Tooltip Text',
id : 'my-button ',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
disabled: true,
handler: function() {

}
}]
});

Ext.create('Ext.panel.Panel', {
title: 'Panel',
renderTo: Ext.getBody(),
dockedItems: [form]
});

//access the form by id and set the value
//var myform = Ext.getCmp('myform');
//myform.loadRecord(user);
//or
//access the form, directly, and set the value
form.loadRecord(user);

});



regards

findajit
9 Jan 2012, 5:10 AM
Following are the steps:

Define a model with the fields
Create an instance of the form panel
Create an instance of the model with the specific data
Get the handle to the instance of the form panel (either using Ext.getCmp() or up()/down()) and load the model instance using loadRecord()