PDA

View Full Version : Removing panels using tools handler



ealsei
24 Oct 2013, 2:26 AM
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 :




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)
}
}
});
});

evant
24 Oct 2013, 2:35 AM
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();
}
}]
});
});

ealsei
24 Oct 2013, 2:54 AM
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.