PDA

View Full Version : Load data into form instantiated by xtype



mcruise
19 Apr 2011, 10:16 PM
Hi,
I'm developing an application, in one of the modules data is to be loaded into the form. I was able to load static data when the form was instantiated by new Ext.form.FormPanel(); Then the form did not display in the center region defined as a tabpanel. Actually clicking on a button on the west region loads the relevant tabs, by removeAll() and add() methods. Only when the form is instantiated by xtype: 'form', does it reload when the the button is clicked again.

So I would like to know how to load data into the 'profile' form, which has a xtype way of declaring it as a form.

profile.getForm().findField('prof_login').setValue('Login name');
doesn't work for form with xtype.

The portion of the code is as follows,
<code>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
var profile= {
xtype: 'form',
border: false,
x: 25,
y: 15,
labelWidth: 120,
labelAlign: 'right',
id: 'profile',
items: [
{
xtype: 'textfield',
width: 250,
fieldLabel: 'Login',
name: 'login', id: 'prof_login'
}, {
xtype: 'textfield',
width: 250,
fieldLabel: 'Organization',
name: 'org'
}, {
xtype: 'textfield',
width: 250,
fieldLabel: 'First name',
name: 'fname'
}, {
xtype: 'textfield',
width: 250,
fieldLabel: 'Last name',
name: 'lname'
}, {
xtype: 'textfield',
fieldLabel: 'Existing password',
name: 'expassword'
}, {
xtype: 'textfield',
fieldLabel: 'New password',
name: 'npassword'
}, {
xtype: 'textfield',
fieldLabel: 'Confirm password',
name: 'confirmpass'
}, {
xtype: 'spacer',
height: 15
}, {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'spacer',
width: 170
}, {
xtype: 'button',
width: 70,
text: 'Save',
}, {
xtype: 'spacer',
width: 25
}, {
xtype: 'button',
width: 70,
text: 'Reset',
handler: function(){
Ext.getCmp('profile').getForm().reset();
}
}
]
}
]
}
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'west',
xtype: 'panel',
frame: 'true',
title: '<center><b>Menu</b></center>',
width: 200,
items: [{
xtype: 'button',
id: 'btn',
autoHeight: false,
height: 40,
width: 188,
text: '<b>Profile </b>',
handler: function(btn){
var tabPanel = Ext.getCmp('myTabPanel');
tabPanel.removeAll();
tabPanel.add(
{
title: '<b>Administration Profile </b>',
layout: 'absolute',
frame: false,
items: [
profile
]
}
);
tabPanel.setActiveTab(0);
tabPanel.doLayout();
}
},
]
},{
region: 'center',
id: 'myTabPanel',
xtype: 'tabpanel',
border: false,
activeTab : 0,
//plain:true,
items: [{
xtype: 'box',
html:'<IFRAME src="intro.html" width="100%" height="1000" scrolling="auto" frameborder="0"></IFRAME>'
}]
},{
region: 'east',
xtype: 'panel',
width: 150
}
});
});
</script>
</code>

Screamy
20 Apr 2011, 6:33 AM
If declaring your form as an xtype, you can't load it until it's been rendered (which is when the actual component instance gets created).

You could add a 'listeners' block to the xtype config and include an 'afterrender' event handler:



var form = {
xtype: 'form',
items: [<bigOleBunchaFormFieldsHere>],
listeners: {
afterrender: function(component) {
// do anything else you need here, then load the form.
component.getForm().load([loadtimeparams here]);
}
}
}

mcruise
20 Apr 2011, 4:50 PM
Thanks Screamy, the idea of introducing 'listeners' with 'afterrender' worked well.

t.nicola13
18 Aug 2011, 10:34 AM
Screamy,

please, can you help me to find my mistake? Button Submit and Load don't work.
I've a "data.php" just like follow:
var x = {
success : true,
data : {
firstName : "Jack",
lastName : "Slocum",
middle : "",
address : "1 Ext JS Corporate Way",
city : "Orlando",
state : "Florida",
zip : "32801",
home : "123 346 8832",
business : "832 932 3828",
mobile : "",
fax : "",
resume : "Skills:<br><ul><li>Java Developer</li><li>Ext JS Senior Core developer</li></ul>",
bio : " Jack is a stand-up kind of guy.<br>"
}
}

but,bellow code doesn't work:

<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
</script>
<body>
<script type="text/javascript">

var fieldset1 = {
xtype : 'fieldset', // 1
title : 'Name',
flex : 1,
border : false, // 2
labelWidth : 60,
defaultType : 'field',
defaults : {
anchor : '-10',
allowBlank : false
},
items : [
{
fieldLabel : 'First',
allowBlank : false, // 2
emptyText : 'This field is empty!', // 3
maskRe : /[a-z]/i // 4
},
{
fieldLabel : 'Middle',
name : 'middle'
},
{
fieldLabel : 'Last',
name : 'firstName'
}
]
};

var fieldset2 = Ext.apply({}, { // 1
flex : 1,
title : 'Address Information',
items : [
{
fieldLabel : 'Address',
name : 'address'
},
{
fieldLabel : 'Street',
name : 'street'
},
{
xtype : 'container', // 2
border : false,
layout : 'column',
anchor : '100%',
items : [
{
xtype : 'container', // 3
layout : 'form',
width : 200,
items : [
{
xtype : 'textfield', // 4
fieldLabel : 'State',
name : 'state',
anchor : '-20'
}
]
},
{
xtype : 'container', // 5
layout : 'form',
columnWidth : 1,
labelWidth : 30,
items : [
{xtype : 'textfield', // 6
fieldLabel : 'Zip',
anchor : '-10',
name : 'zip'
}
]
}
]
}
]
}, fieldset1);

var fieldsetContainer = {
xtype : 'container',
layout : 'hbox',
height : 120,
layoutConfig : {
align : 'stretch'
},
items :[
fieldset1,
fieldset2
]
}
//

var tabs = [
{
xtype : 'container', // 1
title : 'Phone Numbers',
layout : 'form',
bodyStyle : 'padding:6px 6px 0',
defaults : {
xtype : 'textfield',
width : 230
},
items: [
{
fieldLabel : 'Home',
name : 'home'
},
{
fieldLabel : 'Business',
name : 'business'
},
{
fieldLabel : 'Mobile',
name : 'mobile'
},
{
fieldLabel : 'Fax',
name : 'fax'
}
]
},
{
title : 'Resume',
xtype : 'htmleditor', // 2
name : 'resume'
},
{
title : 'Bio',
xtype : 'htmleditor',
name : 'bio'
}
];

var tabPanel = {
xtype :'tabpanel',
activeTab : 0,
deferredRender : false,
layoutOnTabChange : true,
border : false,
flex : 1,
plain : true,
items : tabs
};



var onSuccessOrFail = function(form, action) {
var formPanel = Ext.getCmp('myFormPanel');
formPanel.el.unmask();

var result = action.result;
if (result.success) {
Ext.MessageBox.alert('Success',action.result.msg);
}
else {
Ext.MessageBox.alert('Failure',action.result.msg);
}
};

var submitHandler = function() {
var formPanel = Ext.getCmp('myFormPanel');
formPanel.el.mask('Please wait', 'x-mask-loading');
formPanel.getForm().submit({
url : 'success.true.php',
success : onSuccessOrFail,
failure : onSuccessOrFail
});
}

var onLoadClick=function() {
var formPanel = Ext.getCmp('myFormPanel');
formPanel.el.mask('Please wait', 'x-mask-loading');
formPanel.getForm().load({
url : 'data.php',
success : function() {
formPanel.el.unmask();
}
});
};

var config = {
layout:'column',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Submit',
handler:submitHandler
},
{
xtype: 'button',
text: 'Load',
handler:onLoadClick
}]
};


var myFormPanel = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 700,
title : 'Our complex form',
height : 300,
method : 'GET',
fileUpload : true,
standardSubmit : false,
baseParams : {
foo : 'bar',
sna : 'fu'
},
frame : true,
layout : 'vbox',
layoutConfig : {
align : 'stretch'
},
items : [
fieldsetContainer,
tabPanel,
config
]
});

</script>
</body>