PDA

View Full Version : remove a component



ueilat
1 Aug 2010, 1:46 PM
Hello to everybody.
I'm new to this powerfull framework, some I'm studying examples and documentation.
Here my issue:
I'm trying to remove a component and then to reuse it.
For example in azione2() I'm trying to remove container blocchi[1].
If I use false for autodestroy, doesn't work. If I use true, it works but then I cannot reuse blocchi[1].
thanks
mauro




Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var blocchi=new Array();
var raccoglitori=new Array();

var azione1=function() {

raccoglitori[2].insert(2,blocchi[8]);
raccoglitori[2].doLayout();
raccoglitori[1].doLayout();
};

var azione2=function() {
raccoglitori[2].remove(blocchi[1],false);
raccoglitori[1].doLayout();

};

var Buttons = new Ext.Panel({
layout: {
type: 'vbox',
pack: 'center',
align: 'stretch'
},
cls: 'pino',
scroll: 'vertical',
defaults: {
layout: 'hbox',
flex: 1,
defaults: {
cls: 'demobtn',
flex: 1

}
},
items: [{
items: [{
xtype: 'button',
text: 'Normal',
handler: function() {
azione1();
}
}, {
xtype: 'button',
ui: 'round',
text: 'Round',
handler: function() {
azione2();
}
}]

}]
});






var i=0;
for (i=0;i<=10;i++) {
txt='pippo'+i;
blocchi[i]=new Ext.Container({
html: txt ,
cls: txt
});
}




//alert(blocchi[1].html);

raccoglitori[2]= new Ext.Panel({

layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [blocchi[0],blocchi[1],blocchi[2]]
});


raccoglitori[1]= new Ext.Panel({
fullscreen:true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [Buttons,raccoglitori[2],blocchi[3]]
});


}
});

evant
1 Aug 2010, 5:00 PM
Short sample:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var child = new Ext.Panel({
html: 'I am the child!'
});

var ct = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
style: 'border: 1px solid red;',
flex: 1,
items: child
},{
flex: 1,
style: 'border: 1px solid blue;'
}]
});

(function(){
// after 5 seconds, move it over
ct.items.first().remove(child, false);
ct.items.last().add(child);
ct.items.last().doLayout();
}).defer(5000);
}
});

ueilat
2 Aug 2010, 2:12 AM
thanks a lot

quite near to the solution but not solved....

my needs is to have a layout with 4 boxes horizontal and when an action happen (defer for this test is perfect), the 4 boxes become vertical.
Can you help me with this example?

here my code to generate the boxex:


Ext.setup({
glossOnIcon: false,
onReady: function(){
var child1 = new Ext.Panel({
html: 'pippo 1' ,
cls:'pippo1'
});
var child2 = new Ext.Panel({
html: 'pippo 2' ,
cls:'pippo2'
});
var child3 = new Ext.Panel({
html: 'pippo 3' ,
cls:'pippo3'
});

var child4 = new Ext.Panel({
html: 'pippo 4' ,
cls:'pippo4'
});



//here I should generate the container vertical with 4 childs child1/2/3/4

(function(){
// after 2 seconds, move it over

//here I regenerate the same layout but horizontal with always same childs

}).defer(2000);


}
});


thanks very much in advance

ueilat
2 Aug 2010, 2:20 AM
or more simple:
I create a container (or whatever) with child1 2 3 and 4
I want to remove child2 without destroyng?
is it possible? I call remove but also with doLayout() still remain visible.
I don't want to destroy because later I need it

evant
2 Aug 2010, 2:24 AM
Same thing applies:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){

var children = [];
for(var i = 0; i < 4; ++i){
children.push(new Ext.Panel({
flex: 1,
html: 'Foo ' + i
}));
}

var ct = new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: {
itemId: 'toRemove',
layout: {
type: 'vbox',
align: 'stretch'
},
items: children
}
});

(function(){
var main = ct.items.first();
Ext.each(children, function(item){
main.remove(item, false);
});
main.destroy();
ct.add({
layout: {
type: 'hbox',
align: 'stretch'
},
items: children
});
ct.doLayout();
}).defer(3000);
}
});

ueilat
2 Aug 2010, 3:39 AM
In principle I agree,
if you try it, it happens that the elements are removed but not recreated.
If you can test you find at http://www.fiorentina.it/iphone/test3.htm
I tried with ipad using sencha touch version beta 0.91
is it a bug?

evant
2 Aug 2010, 3:43 AM
Try upgrading, the code ran fine for me.

Animal
2 Aug 2010, 3:53 AM
Might you need this plugin?

http://www.sencha.com/forum/showthread.php?105909-ContainerClear.-Plugin-to-cause-Container.remove-to-remove-removed-Components

(It should work on Sencha Touch as well as ExtJS)

ueilat
2 Aug 2010, 4:01 AM
Perfect
it was a matter of library version
with 0.92 it works!!!!!