PDA

View Full Version : Checkbox not reseting problem



razvan_s
6 Feb 2012, 5:11 AM
Hi everyone.
I've been using ExtJS 3 and now we decided to give Ext JS 4 a try. I've been able to put in practice the "MVC" architecture that the new version proposes, but I've staggered around some problems, and can't find a solution.
So basically my part of the application that I keep having problems works like this: I have 2 views that extend Ext.form.Panel. The first one is an upload form (to upload a file) and the second one is a basic form with 2 check boxes . After you upload a file the other form with the check boxes will be displayed. They are inside a card layout and are shown in this order. The problem is that after I upload the file and on the success operation I can't reset the check boxes of the other form.
This is the first view that does the upload. On succes I just want to reset the other form and display it. If I upload a file I will display the next form and from there I can select the checkboxes and then hit the yes button to go again on the upload form (it's like a cycle). But everytime that I display the checkboxes I want them to be unchecked.


Ext.define('CM.view.artefact.Form' ,{
extend: 'Ext.form.Panel',
alias : 'widget.artefactform',
autoScroll: true,
frame: true,
initComponent: function() {
this.items = [{
xtype: 'filefield',
name: 'artefact',
allowBlank: false,
anchor: '20%',
buttonText: 'upload'
}];

this.buttons = [{
text: 'do upload',
handler: function() {
var form = this.up('form').getForm();
form.submit({
url: 'artefact/upload',
success: function(fp, o) {
var responseOptions = Ext.decode(o.response.responseText);
showUpdateform(responseOptions);
}
}];
this.callParent(arguments);
}
});
function showUpdateform(options) {
Ext.widget('artefactupdateform').getForm().reset();
Ext.ComponentQuery.query('#mainPanel')[0].getLayout().setActiveItem(2);
};


This is form with the checkboxes.


Ext.define('CM.view.artefact.Updateform' ,{
extend: 'Ext.form.Panel',
alias : 'widget.artefactupdateform',
autoScroll: true,
frame: true,
initComponent: function() {
this.items = [{
xtype: 'fieldcontainer',
fieldLabel: 'choose',
defaultType: 'checkboxfield',
labelWidth: 300,
items: [{
boxLabel : 'opt',
name : 'checkbox1',
id : 'checkbox1'
}, {
boxLabel : 'composition',
name : 'checkbox2',
id : 'checkbox2'
}]
},{
xtype: 'hiddenfield',
name: 'uid',
id: 'uid'
}];

this.buttons = [{
text: 'yes'
handler: function() {
Ext.ComponentQuery.query('#mainPanel')[0].getLayout().setActiveItem(1);
}
}, {
text: sigmedJSTranslations.get('noButtonLabel'),
handler: function() {
Ext.ComponentQuery.query('#mainPanel')[0].getLayout().setActiveItem(0);
}
}];
this.callParent(arguments);
}
});

So first time I show the checkboxes, they are unchecked. But if I check them and then go to the upload form(by hitting that yes button) if I upload something again and get back to the checkboxes page they remain unchecked, although I reset the form. I've tried to go through the ext js code and found that my problem is here: in the setRawValue() method of the Ext.form.field.Checkbox class the varriable me.inputEl is undefined the second time I go through this cycle. Does anyone have any ideea why this happens? Is there something that I'm missing regarding the file upload form that can influence other forms on this application?

friend
6 Feb 2012, 7:16 AM
I think your problem is here:



function showUpdateform(options) {
Ext.widget('artefactupdateform').getForm().reset();
Ext.ComponentQuery.query('#mainPanel')[0].getLayout().setActiveItem(2);
};


If you read the API docs, Ext.widget() is used to create a widget, by xtype. So I think you're actually creating a new instance of the form and resetting it, instead of resetting the target form. Try doing Ext.ComponentQuery.query('artefactupdateform').getForm().reset();