PDA

View Full Version : Show connected panel



Oxii
30 Jun 2012, 11:58 PM
I am a new Sencha / Extjs user.


would you please take a look at this :
http://dev.sencha.com/deploy/ext-4.0.0/examples/forum/forum.html


when you click on the 'Preview Pane' button, a new panel will appear and connecting to the main panel
i need to do the same. would you guide me how to do it ?

thanks

(http://dev.sencha.com/deploy/ext-4.0.0/examples/forum/forum.html)

sword-it
2 Jul 2012, 12:11 AM
Hi!
you have two conditions :-
1.Your panel (to be added) is already rendered and is initially hidden.In this case, you have to just find your panel and show it
2.You have to dynamically add a new panel when button is clicked.

For Your Condition:-
//Assume there is a panel named 'miniPanel', INITIALLY HIDDEN(hidden:true) and you have to show it on button click in it.




//Assume there is a panel named 'miniPanel',INITIALLY HIDDEN(hidden:true) and you have to show it on button click in it.




//Your Button
{
text:'Preview Pane Button'
handler:onPreviewPaneClick
}


function onPreviewPaneClick(button){
// find your mainPanel and use it below, eg to find
//var mainPanel=yourScope.find('name','mainPanel')[0];
var miniPanel=mainPanel.find('name','miniPanel')[0];
miniPanel.show();
}




For your Second Condition:-



function createMiniPanel(){
return[{
xtype:'panel'
title: 'Hello',
width: 200,
html: '<p>World!</p>'
}]
}


//Your Button
{
text:'Preview Pane Button'
handler:onPreviewPaneClick
}


function onPreviewPaneClick(button){
// find your mainPanel and use it below, eg to find
//var mainPanel=yourScope.find('name','mainPanel')[0];
mainPanel.add(createMiniPanel());
mainPanel.doLayout();
}



You can also use insert method instead of add to add component at a specified index,
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-insert

Oxii
24 Jul 2012, 2:24 PM
Thank you so much !