PDA

View Full Version : How to send a FormPanel by a toolbar Button without knowing the FormPanels name



eXaminator
6 Aug 2010, 1:04 AM
Hi folks,

I know there are plenty of articles regarding this topic, but I couldn't find quite the right solution to my question. So please forgive me if this question was already answered before. :)

So I'm just getting used to Sencha Touch and I'm trying to create a Form to send some Data over to a PHP-Script. I had a look at the form example of sencha Touch an used it to build a Form. Since I might create more then one similar form I extended the FormPanel as following:


MyApp.Ui.Form = Ext.extend(Ext.form.FormPanel, {
url : 'script.php',
standardSubmit : false,
items: [{xtype: 'fieldset',
title: 'title...',
instructions: 'instructions...',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'textarea',
name: 'text',
label: 'Text'
}]
}],

dockedItems: [{
xtype:'toolbar',
dock:'bottom',
items:[{
text: 'Save',
ui: 'action',
handler: function() {
this.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});
}
}]
}],

listeners: {
submit: function(form, result) {
alert(result);
}
}

});So I have this Class (MyApp.Ui.Form) an create a New FormPanel with it (new MyApp.Ui.Form()). That's no problem so far. But you might already have noticed: Sending the form using the button in the toolbar (like they've done it in the form example) wont work since I used "this.submit()" outside of the FormPanels scope.

In the example they createt a FormPanel and used the variable name to submit the form ("form = new FormPanel(...); form.submit(...);")

But in my case I don't know the name of the FormPanel (or to be more accurate: MyApp.Ui.Form) object.

I've this structure:
FormPanel -> Toolbar -> Button

How can I submit the FormPanel from within the buttons handler without knowing the name with which the FormPanel might be instantiated?

Please excuse my mistakes, english isn't my native language ;) I hope you understand my quetsion.

blessan
6 Aug 2010, 1:19 AM
Wont
MyApp.Ui.Form.submit() work?

Well put a id in the form and then u can use
Ext.getCmp('yourId').submit();

eXaminator
6 Aug 2010, 1:26 AM
Hi blessan,

thanks for your answer.

MyApp.Ui.Form.submit() is undefined. I guess that's to be expected since MyApp.Ui.Form is a class, not an object.

I could set an id and youse your second method, but wouldn't that be a problem if I had more then one instance of that class?


Let's say I used my class to create two instances (I actually never have two instances of this class at the same time... but this is a rather general question in my opinion) of it. One of it is shown on the screen, the other one is hidden (or on an iPad I might actually show both Panels at the same time for some reason...). Wouldn't this become a problem when both instances have the same ID? And if I gave them different IDs while instantiating the objects I would again have the problem of not knowing which ID to use within the button handler.

Edit:
Isn't there some way to get the Parent-Component? So I could say this.getParent().getParent().submit() while this would be the button?

blessan
6 Aug 2010, 1:32 AM
Normally everyone create 2 objects of MyApp.Ui.Form and call submit for these objects. Well thats pretty much how I'd do it. I normally try my best not to extend and just whip up from whats already available.

eXaminator
6 Aug 2010, 1:40 AM
But then I'd have to create a toolbar with a send button and an apropriate handler for each and every FormPanel I create even though they look and behave all exactly the same?

Though I guess I could use some sort of container Object for my FormPanel that handles the creation of my FormPanel and knows the instance of the FormPanel to invoke a submit... I'll think about that. Thanks alot :)