Clearing CheckTree Panel during form reset

[scgrif32]

Hello All,

I am porting an Ext Js 3 application to Ext Js 4 leveraging the MVC application architecture. In my previous version (Ext Js 3) I was able to reset the values of the checktree panel (Ext.ux.tree.CheckTreeField) using clearValue() but seem to not be able to do so using Ext Js 4.

I used the module written by Saki which extended the version of Treepanel that was supported in Ext Js 3 and after checking the documentation for Ext Js 4 was able to verify that clearValue() is available via 'Ext.ux.form.MultiSelect'.

Here is a description of the fields that exist with in the form:

Start_date: Date Field
End_date: Date Field
Case_Status: Combo (autoLoad: true)
Location: CheckTreePanel (autoLoad: true)
Compress_zip: (checkbox)
Create: (Submit action)
Reset: (Reset action)

Does anyone know how to reset a Checktree Panel that is being used within a form?

Controller snippet below:

Reference to check tree panel (#location is the id of xtype: 'treepanel')

refs: [
        {ref: 'createReportFormPanel', selector: 'sform[id=report-form]'},
        {ref: 'caseStatusCombo', selector: 'combo[name=ReportCaseStatus]'},
        {ref: 'delReportBtn', selector: '#deleteReportsBtn'},
        {ref: 'startDateField', selector: 'datefield[name=start-date]'},
        {ref: 'endDateField', selector: 'datefield[name=end-date]'},
        {ref: 'checkTree', selector: 'sform[id=report-form] #location'}
],

init: function(app) {

     this.control({
           'button[action=reset]': {
                 click: function() {
                         this.getCreateReportFormPanel().getForm().reset();
                         this.getCheckTree().clearValue();
                 }
           },
     });
}

I am using a config on the 'reset' button (action: 'reset') which I use for a ComponentQuery lookup ('button[action=reset]') which will allow me to use a listener for the 'click' event on the 'reset' button. The form will reset the combo but does not reset the Date Fields, Remove a checked check box or clear the selections for the CheckTree Panel.

Any help anyone could provide would be GREATLY appreciated.

Thank you,

Shawn

[mitchellsimoens]

You would have to cascade through the store and set the checked field to false.

What I would do is cascade through the store, and if the record is checked then uncheck:

var view = treepanel.getView();

view.node.cascadeBy(function(rec) {
    if (rec.get('checked')) {
        rec.set('checked', false);
        view.fireEvent('checkchange', rec, false);
    }
});

[scgrif32]

Mitchell,

Your solution worked like a beauty. Thank you so much. Is it possible to use the same approach to select ALL parent/child nodes in the Checktree Panel or is there a better method to do such?

Thanks,

Shawn

[mitchellsimoens]

Sure it's possible. Just change the two false to true and it should check all.