Results 1 to 3 of 3

Thread: Removing panels using tools handler

  1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    3

    Default Answered: Removing panels using tools handler

    Hi,
    I'm new in extjs, i managed to create dynamic panels inside a container, but i want to be able to remove them, using each of those added panels' tool

    Here's the code :
    Code:
    Ext.onReady(function() {
        var states = Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name'],
            data : [
                {"abbr":"Nom", "name":"Nom"},
                {"abbr":"Pre", "name":"Prenom"},
                {"abbr":"A", "name":"Age"},
                {"abbr":"Vil", "name":"Villes"},
                {"abbr":"Fun", "name":"Fonctions"},
                {"abbr":"Dom", "name":"Domaines"},
                {"abbr":"Ori", "name":"Origines"},
                // ...
            ]
        });
    
    
        // Create the combo box, attached to the states data store
        var filtersBox = Ext.create('Ext.form.ComboBox', {
            id :'filtersBox',
            fieldLabel: 'Choisissez :',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            renderTo: Ext.getBody()
        });
        
        Ext.create('Ext.Button', {
            text    : 'Nouveau',
            renderTo: Ext.getBody(),
            handler : function() {
                var choice = filtersBox.getRawValue().toString();
                if (choice=="") {
                   alert('Choisissez un filtre S.V.P.');
                } else {
                
                    switch (choice){
                    case "Nom" :
                        forms[formsPosition] = Ext.create('Ext.form.Panel', {
                            
                            title: 'Nom  '+noms,                            
                            bodyPadding: 5,
                            collapsible : true,
                            titleCollapse : true,
                            animate : true,
                            url: 'save.php',
                            
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: 'Nom ',
                                name: 'firstName'+noms
                            }],
    //*********************************** The tool button code **********************
                            tools:[{
                                type: 'close', 
                                    tooltip: 'Supprimer',
                                    handler: function() { 
                                     // This doesn't work !!
                                       AccordingPanel.remove(forms[formsPosition],true);
                                    }
                            }],
    //*********************************** The tool button code **********************
                            renderTo: Ext.getBody()
                        });
                        AccordingPanel.add(forms[formsPosition]);
                        AccordingPanel.doLayout();
                        noms++;
                        formsPosition++;
                        this.clickCount++;                    
                        break;
                    case "Prenom" :
                        forms[formsPosition] = Ext.create('Ext.form.Panel', {
                            title: 'Prenom  '+prenoms,                            
                            bodyPadding: 5,
                            collapsible : true,
                            titleCollapse : true,
                            animate : true,                            
                            url: 'save.php',
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: 'Prenom ',
                                name: 'lastName'+prenoms
                            }],
                            renderTo: Ext.getBody()
                        });                        
                        AccordingPanel.add(forms[formsPosition]);
                        AccordingPanel.doLayout();
                        prenoms++;
                        formsPosition++;
                        this.clickCount++;
                        //alert('Last Name Form added !!!!!!!');
                        break;
                    case "Age" :
                        var ageSpinnerOne = Ext.create('Ext.form.Spinner', {
                            id : 'firstAge'+ages,
                            fieldLabel: 'Age entre :',
                            value: 18,
                            step: 1,
                            renderTo: Ext.getBody(),
                            onSpinUp: function() {
                                var me = this;
                                var firsts = parseInt(ageSpinnerTwo.getRawValue().toString());
                                if (!me.readOnly) {
                                    var val = me.step; // set the default value to the step value
                                    if(me.getValue()) {
                                        val = parseInt(me.getValue()); 
                                    }
                                    me.setValue(val + me.step);
                                    if (me.getValue() >= firsts){
                                        ageSpinnerTwo.setValue(me.getValue());
                                    }
                                }
                            },
                            onSpinDown: function() {
                                var val, me = this;
                                if (!me.readOnly) {
                                    if(me.getValue() !== '') {
                                        val = parseInt(me.getValue());
                                    }
                                    if(me.getValue()!=0){
                                        me.setValue(val - me.step);
                                    }
                                }
                            }
                            
                        });
                        var ageSpinnerTwo = Ext.create('Ext.form.Spinner', {
                            id : 'secondAge'+ages,
                            fieldLabel: ' et :',
                            value: 30,
                            step: 1,
                            renderTo: Ext.getBody(),
    
    
                            onSpinUp: function() {
                                var me = this;
                                if (!me.readOnly) {
                                    var val = me.step; // set the default value to the step value
                                    if(me.getValue()) {
                                        val = parseInt(me.getValue()); 
                                    }
                                    me.setValue(val + me.step);
                                }
                            },
    
    
    
    
                            onSpinDown: function() {
                                var val, me = this;
                                var seconds = parseInt(ageSpinnerOne.getRawValue().toString());
                                if (!me.readOnly) {
                                    if(me.getValue() !== '') {
                                        val = parseInt(me.getValue());
                                    }
                                    if(me.getValue()!=0){
                                        me.setValue(val - me.step);
                                    }
                                    if (me.getValue() <= seconds){
                                        ageSpinnerOne.setValue(me.getValue());
                                    }
                                }
                            }
                        });
                        forms[formsPosition] = Ext.create('Ext.form.Panel', {
                            title: 'Tranche d\'age '+ages,
                            renderTo: Ext.getBody(),
                            collapsible : true,
                            titleCollapse : true,
                            bodyPadding: 5,
                            width: 100,
                            layout : 'column',
                            url: 'save.php',
                            items: [
                                    ageSpinnerOne
                            ,
                                    ageSpinnerTwo
                            ],
                        });
                        AccordingPanel.add(forms[formsPosition]);
                        AccordingPanel.doLayout();
                        ages++;
                        formsPosition++;
                        this.clickCount++;
                        break;
                    case "Villes" :
                        forms[formsPosition] = Ext.create('Ext.form.Panel', {
                             title: 'Villes '+villes,
                            renderTo: Ext.getBody(),
                            collapsible : true,
                            titleCollapse : true,
                            bodyPadding: 5,
                            width: 200,
                            layout : 'column',
                            html: "<select multiple='multiple' size='10' name='cities'"+villes+"><option value='1'>Casablanca</option><option value='2'>Rabat</option><option value='3'>Kenitra</option><option value='4'>Safi</option><option value='5'>Fes</option><option value='6'>Sale</option></select>"                          
                        });
                        AccordingPanel.add(forms[formsPosition]);
                        AccordingPanel.doLayout();
                        villes++;
                        formsPosition++;
                        this.clickCount++;
                        break;
                    case "Fonctions" :
                        forms[formsPosition] = Ext.create('Ext.form.Panel', {
                             title: 'Fonctions ' +functions,
                             renderTo: Ext.getBody(),
                            collapsible : true,
                            titleCollapse : true,
                            bodyPadding: 5,
                            width: 200,
                            layout : 'column',
                            html: "<select multiple='multiple' size='10' name='functions'"+functions+"><option value='1'>Etudiant</option><option value='2'>Professeur</option><option value='3'>Directeur</option><option value='4'>Chercheur</option><option value='5'>Ingenieur</option><option value='6'>Homme d'affaires</option></select>"                                
                        });                        
                        AccordingPanel.add(forms[formsPosition]);
                        AccordingPanel.doLayout();
                        functions++;
                        formsPosition++;
                        this.clickCount++;
                        alert('Functions form Added !!!!!!!');
                        break;
                    case "Domaines" :
                        forms[formsPosition] = Ext.create('Ext.form.Panel', {
                             title: 'Domaines : ' + domains,
                            renderTo: Ext.getBody(),
                            bodyPadding: 5,
                            collapsible : true,
                            titleCollapse : true,
                            width: 200,
                            layout : 'column',
                            html: "<select multiple='multiple' size='10' name='domain'"+domains+">  <option value='1'>Ingenierie</option><option value='2'>Mecanique</option><option value='3'>Physique</option><option value='4'>Chimie</option><option value='5'>Geologie</option><option value='6'>Litterature</option></select>"
                        });
                        AccordingPanel.add(forms[formsPosition]);
                        AccordingPanel.doLayout();
                        domains++;
                        formsPosition++;
                        this.clickCount++;
                        //alert('Domaines form Added !!!!!!!');
                        break;
                    case "Origines" :
                        forms[formsPosition] = Ext.create('Ext.form.Panel', {
                             title: 'Origines : '+origins,
                            renderTo: Ext.getBody(),
                            bodyPadding: 5,
                            width: 200,
                            collapsible : true,
                            titleCollapse : true,
                            layout : 'column',
                            html: "<select multiple='multiple' size='10' name='origin'"+origins+">  <option value='1'>Berbere</option><option value='2'>Arabe</option>  <option value='3'>Rifi</option>  <option value='4'>Jebli</option>  <option value='5'>Soussi</option></select>"
                        });
                        AccordingPanel.add(forms[formsPosition]);
                        AccordingPanel.doLayout();
                        origins++;
                        formsPosition++;
                        this.clickCount++;
                        //alert('Origins form Added !!!!!!!');
                        break;
                    }
                // **************** The next Part *********************/    
                
            }}
        });
        var AccordingPanel = Ext.create('Ext.panel.Panel', {
            bodyPadding :5,
            id : 'AccordingPanel',
            title : 'Accordion Layout',
            resizable:true,
            width : 1000,
            height : 300,
            monitorResize:true,
            autoDestroy:true,
            defaults : {
                // applied to each contained panel
                bodyStyle : 'padding:15px'
            },
            layout : {
                // layout-specific configs go here
                type : 'accordion',
                titleCollapse : true,
                animate : true,
                activeOnTop : true,
                collapseFirst : true 
            },
            items:[{
                title: 'Panel 0',
                xtype: 'panel',
                hidden:true            
            }],
            renderTo : Ext.getBody()
        });
        Ext.create('Ext.Button', {
            text: 'Enregister',
            renderTo: Ext.getBody(),
            handler: function() {
                var allElements = document.getElementsByTagName('*');
                for (var i=0;i<allElements.length;i++){
                  //do things with the element, e.g.
                  console.log(allElements[i].name)
                  console.log(allElements[i].value)
                }        
            }
        });
    });

  2. Code:
    Ext.require('*');
    Ext.onReady(function() {
        new Ext.panel.Panel({
            renderTo: document.body,
            width: 200,
            height: 200,
            title: 'Foo',
            html: 'Bar',
            tools: [{
                type: 'print',
                handler: function() {
                    // Haha not really, close!
                    this.up('panel').destroy();
                }
            }]
        });
    });

  3. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256
    Answers
    759

    Default

    Code:
    Ext.require('*');
    Ext.onReady(function() {
        new Ext.panel.Panel({
            renderTo: document.body,
            width: 200,
            height: 200,
            title: 'Foo',
            html: 'Bar',
            tools: [{
                type: 'print',
                handler: function() {
                    // Haha not really, close!
                    this.up('panel').destroy();
                }
            }]
        });
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #3
    Sencha User
    Join Date
    Oct 2013
    Posts
    3

    Default

    Thank you, it's accurate, fast, and directly to the point.
    For other users :
    - It does delete them from the DOM, so the form doesn't exist at all, and the fields are no longer in the DOM document.
    - No problem with the last Panel, I get an empty accordion.
    Problem solved.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •