PDA

View Full Version : Clear Form Data



razzle
20 Jun 2011, 7:25 AM
I want to be able to enter text into my fields for the form and then when I click on a Reset/clear button at the bottom it basically will remove all information type in the fields.

For my Form I have


var Autocard = new Ext.Panel( {
title: "test",
iconCls: 'compose',
itemId: 'testClear',


And then I try to call that form with the reset function


items: [{
text: 'Reset',
handler: function(){
Autocard.testClear.reset();
}
}



When I try this on my local environment the console says the following:
Cannot call method 'reset' of undefined

razzle
20 Jun 2011, 8:27 AM
Can anyone assist with this issue, working on a deadline right now?

digil
20 Jun 2011, 8:42 AM
Razzle, I'm pretty new to Sencha so I might be way off, but I think its undefined because there is no Autocard.testClear object. Perhaps something like this will work:


var Autocard = new Ext.Panel( {
title: "test",
iconCls: 'compose',
itemId: 'testClear',
id : 'testClear',


items: [{
text: 'Reset',
handler: function(){
var testClear Ext.getCmp('testClear');
testClear.reset();}
}


The main idea is that I added an id under the panel and then we use getCmp to get a JS reference to that Component, to which you can call clear. I still don't know if that will do what you're trying to do, but at least it will help you with the undefined.

razzle
20 Jun 2011, 8:59 AM
That does make sense, but now the console is telling me I have an unexpected identifier. I went ahead and removed the itemID, I believe we only need that labeled one time.

This is my panel


var Autocard = new Ext.Panel( {
title: "test",
iconCls: 'compose',
id: 'testClear',


Then I have my actual form

items: [{
xtype: 'textfield',
name : 'fname',
label: 'First Name',
required: true

},{
xtype: 'textfield',
name : 'lname',
label: 'Last Name',
required: true
},


Then I want to clear the forms:

{
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Reset',
handler: function(){
var autoClear Ext.getCmp('autoClear');
autoClear.reset();}
}

razzle
20 Jun 2011, 9:01 AM
The testClear = the autoClear in my code I just tried to eliminate that from my posting but forgot to change it on the third Code Paste.

digil
20 Jun 2011, 9:07 AM
in your 3rd code section you have var
autoClear Ext.getCmp('autoClear'); instead of
var autoClear = Ext.getCmp('autoClear');

razzle
20 Jun 2011, 9:21 AM
Wow! Thank You that fixed it. But now it is back to the very beginning error I had before I tried anything.

Saying it has no method reset

digil
20 Jun 2011, 9:23 AM
Looking @ the API, I don't see a reset method under Ext.Panel but I do under Ext.form.FormPanel, perhaps you should be using that.

razzle
20 Jun 2011, 9:28 AM
Yep It works perfect! Thank You!

skitchpatterson3
14 Aug 2012, 10:00 AM
It's been over a year since your post, but this may be helpful for others experiencing this issue: I had the same issue (console telling me "Cannot call method 'reset' of undefined"), and so I changed id to itemId - this worked for me.

Note: I used
Ext.define('myApp.view.myForm'), { ... }); notation in my .js file, not
var formPanel = Ext.create('...') I'm new to Sencha Touch, but I have seen that there are multiple ways to configure an app, so I thought I'd clarify this. :)