1. #1
    Touch Premium Member
    Join Date
    Sep 2010
    Location
    Chicago, IL
    Posts
    40
    Vote Rating
    1
    scgrif32 is on a distinguished road

      0  

    Question Clearing CheckTree Panel during form reset

    Clearing CheckTree Panel during form reset


    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:
    Code:
    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')
    Code:
    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    var view = treepanel.getView();
    
    view.node.cascadeBy(function(rec) {
        if (rec.get('checked')) {
            rec.set('checked', false);
            view.fireEvent('checkchange', rec, false);
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Touch Premium Member
    Join Date
    Sep 2010
    Location
    Chicago, IL
    Posts
    40
    Vote Rating
    1
    scgrif32 is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Sure it's possible. Just change the two false to true and it should check all.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.