PDA

View Full Version : Nesting a Formpanel in a Window



tfcoding
27 Jun 2010, 2:00 PM
Hi, i am new to ExtJS Designer and i have a problem by understanding the way of code generation, particularly with the following codes .

Normaly i write a form by using


var form = new Ext.FormPanel({...the way of acessing and submitting the values works finde for my like this


form.getForm().submit({...

#Generated Code's Starts here

Now my Problem, the FormPanel which is nested in the Window looks like this...


MyWindowUi = Ext.extend(Ext.Window, {
title: 'Datensatzeingabe',
width: 1093,
height: 850,
layout: 'form',
initComponent: function() {
this.items = [
{
xtype: 'form',
title: 'My Form',
labelWidth: 100,
labelAlign: 'left',
layout: 'form',
padding: 15,
height: 746,
items: [....I dont know if can use the getForm().submit( method by calling it from the id from the xtype form?

The other thing that confuse me a little bit, if i look at the code from the first child of my window, which is the Form i have nested, i see this code, but it would not be generated if i export the whole project.


MyFormUi = Ext.extend(Ext.form.FormPanel, {
title: 'My Form',
labelWidth: 100,
labelAlign: 'left',
layout: 'form',
padding: 15,
height: 746,
initComponent: function() {
this.items = [
{......I hope have explained my problem understandably

Thx for reading and helping me out, i will try in the future to help other beginners with my new won humancapital ;)


tf

j-joey
28 Jun 2010, 5:40 AM
if you select a component and switch to code view, you'll see the selected component as the root component. you cannot see its parent components. don't let it confuse you.

normally your window is your root component and form is one of its children. you can reach the form directly from root component by assigning a autoRef property or using Ext.getCmp with your form's id parameter.

autoRef automatically sets the correct ref to root component.

i assume that you windows jsClass property is set to myWindow and your form's autoRef property is set to myForm.

now you can submit the form:
myWindow.myForm.getForm().submit( ... )

if you're in myWindow's definition, you should use "this" instead of "myWindow".

tfcoding
28 Jun 2010, 6:25 AM
:)


This is exactly what i need to know...


Great, thank you.

jarrednicholls
28 Jun 2010, 6:32 AM
Thanks Joey again!

On a side note, the next release will contain a feature called "Promote to Class", and you will be able to take any child component in the Component Tree (right hand side) and promote it to the root level, making it an exportable class. A "linked" node will take its original place in the tree, and be a "shadow" instance of the promoted class using a custom "xtype". So you will be able to turn any node in the tree into an exportable class, which is powerful for many obvious reasons (reusability to name one).

So with the new PtC feature, the FormPanel could become exportable if you wished, and the Window would load the FormPanel via it's custom xtype.