How can you add a child node to an existing TreePanel programmatically using JavaScript?
I have a TreePanel that displays the active layers of a map (using GeoExt):
treeConfig = new OpenLayers.Format.JSON().write([{
nodeType: "gx_baselayercontainer",
text: "Base layers",
expanded: true
}, {
nodeType: "gx_overlaylayercontainer",
text: "Overlays",
expanded: true,
loader: {
baseAttrs: {
radioGroup: "foo",
uiProvider: "use_radio"
}
}
}], true);
treePanel = new Ext.tree.TreePanel({
id: 'mainpanel',
border: true,
region: "west",
title: "Map layers",
width: 200,
split: true,
collapsible: true,
margins: '0 0 5 5',
collapseMode: "mini",
autoScroll: true,
loader: new Ext.tree.TreeLoader({
applyLoader: false,
uiProviders: {
"use_radio": LayerNodeUI
}
}),
root: {
nodeType: "async",
children: Ext.decode(treeConfig)
},
listeners: {
"radiochange": function(node){
alert(node.layer.name + " is now the the active layer.");
}
},
rootVisible: false,
lines: false
});
The user should be able to add an overlay layer by pressing a button, however I cannot seem to find any examples on how to accomplish this.
Any ideas?
Grab the parent node by getNodeById or getRootNode and add the child node with appendChild.
See the example at:
http://dev.geoext.org/geoext/trunk/geoext/examples/layercontainer.html
Is your layers property of the treePanel defined?
treePanel.layers.add(layer);
here is the sample code for dynamically append child to tree panel
Ext.getCmp('treeid').getRootNode().appendChild(response from database);
Related
I use Ext5 and I have a question. Is it possible to remove text and add items into panel header after the panel collapsed?
Belows the code, the east panel is collapsible. I want to remove text and add items into header after it collapsed.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
UPDATE
In this case, I add buttons into header but when the panel is collapsed the button disappeared. Is there any way to show or add components into header when panel is collapsed?
{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150,
header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}
}
here is the fiddle
Thanks
Please refer to "placeholder" related configs in Ext.panel.Panel class. Below is your code from fiddle modified.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
collapseMode:'placeholder',// set collapseMode to placeholder
split: true,
width: 300,
placeholder:{ // Try different components and layout configs
width:100,
items:[{
xtype:'button',
text:'Button 1'
}]
}
/*header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}*/
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
The header you see collapsed is actually another instance of Ext.panel.Header created just for this purpose. I tried to find some configs to customize it, but the Ext.panel.Panel was not created having it in mind.
So you'll have to override the method which creates this reader, which I found out is called createReExpander. It's a big method hard to override without having to rewrite a lot of stuff, but it can be done.
I tried adding buttons to the header and the result was not visually nice, but at least they were created!
So I would suggest you use tools instead of buttons if you don't need text on them.
I just started using ExtJS 3.4 version. And I was not sure how to access the items within the panel when there is no id or itemId assigned to it. I have used Ext JS 4.2 before but I need to use 3.4 version for now.
In my case, I am using border layout here. I have a tree panel on the east region and a tabpanel in the center region. And I want to update the center region dynamically with grids or forms based on the tree node clicked.
here is my code for the tabpanel
{
xtype : 'tabpanel',
title : 'Center Panel',
width : 200,
region : 'center',
items:[gridpnl]
}
And here is the complete code that I tried
First ExtJs Page
Ext.onReady(function () {
Ext.namespace('Class');
Class.create = function() {
return this.init(config);
}
};
Ext.namespace('FirstOOPS');
FirstOOPS = Class.create();
FirstOOPS.prototype = {
init: function (config) {
var store= new Ext.data.ArrayStore({
fields: [{name: 'C1'},{ name: 'C3'}, {name: 'C5'}]
});
var myData= [['abcdC11','C3','C5'],['asdf','C3_asdf','C5_asdf']]
store.loadData(myData);
var gridpnl= new Ext.grid.GridPanel({
layout: 'fit',
height: 500,
width: 500,
store: store,
columns:[
{header: "C1", dataIndex: 'C1'},
{header: "C3", dataIndex: 'C3'},
{header: "C5", dataIndex: 'C5' }
]
});
var mainPanel = new Ext.Panel({
layout : 'border',
items : [
{
region: 'east',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Grid',
leaf: true
}, {
text: 'Form',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
if(n.text=='Grid'){
Ext.Msg.alert(n.text);
}
}
}
},{
xtype : 'tabpanel',
title : 'Center Panel',
width : 200,
region : 'center',
items:[gridpnl]
}
]
});
new Ext.Viewport({
layout : 'fit',
items : [mainPanel]
});
}
};
var firstObj = new FirstOOPS();
});
</script>
</body>
</html>
Can someone tell me how to access this without id, so that I can update the tabpanel dynamically or create new tabs based on the tree node click.
Thanks in advance
you can use the following code to access tabpanel without using id or items id
this.up().items.items[1]
to test the above code I am alerting the title of the tab panel by following code
alert(this.up().items.items[1].title);
it will alerts the title of the tab panel
I'm quite new inside JavaScript frameworks.
Recently, I've been working on a Man Machine Interface using Geoext, extJS and OpenLayers.
For the moment, I've a simple panel and I want it to display a map.
My code is like this :
(note that I'm not displaying there the OpenLayers code to make the map, but there is no point to do so)
var mappanel = Ext.create('GeoExt.panel.Map', {
title: "AZE TILE - AZE",
map: map,
center: '12.3046875,51.48193359375',
zoom: 6,
stateful: true,
stateId: 'mappanel',
});
And then, I have my Viewport :
Ext.create('Ext.container.Viewport', {
layout:'border',
id: 'BorderLayout',
defaults: {
collapsible: true,
split: true,
},
items: [
[...]
{
region:'center',
title:'Représentation',
xtype: 'tabpanel',
activeTab: 0,
split: false,
collapsible: false,
animCollapse: false,
margins: '5 0 5 0',
items: [
{
title: 'Tableau',
},
{
title: 'Carte', <- WHERE I WANT TO DISPLAY THE MAP CONTAINED IN THE PREVIOUS VARIABLE mappanel
},
{
title: 'Graphiques',
},
]
}
]
});
I don't know how to do this. I found an example in the Geoext2 website, but all they do is calling the variable like this :
items: [
mappanel
]
It is working but then, I can't add some more options to the items (like title).
I guess it is a simple work to get done but I can't figure out, forgive my newbiness :-) !
I don't know much about the GeoExt panel, nothing to be serious.
You can try to put your mappanel into another container:
items:[{
title: "AZE TILE - AZE",
items:[{
xtype: 'container',
items: [mappanel]
}]
}]
By the way your code:
items: [
{
mappanel
},
if mappanel is already an object, you don't have to use the curly brackets.
Easy answer by the way, I found it myself.
items: [
{
title: 'Tableau',
},
mappanel,
{
title: 'Graphiques',
},
]
I have a ExtJs 4.1 tree panel. The tree is having multiple nodes. Now I allow user to perform contains search on tree node. So if I run the search on word ASP.NET, the search should highlight all the nodes who's text contains key word ASP.NET
How Can I do this?
Thank you
You need to search for children from the TreePanel's root node, then use RegEx to test the value of the Node vs your search text.
Working Example
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Javascript", leaf: true },
{ text: "ASP.net", leaf: true },
{ text: "Also ASP.net", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Example Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
multiSelect: true,
renderTo: Ext.getBody(),
dockedItems: [{
xtype: 'toolbar',
dock : 'bottom',
items : [{
text: 'Search for ASP.net',
handler: function(){
var me = this,
panel = me.up('panel'),
rn = panel.getRootNode(),
regex = new RegExp("ASP.net");
rn.findChildBy(function(child){
var text = child.data.text;
if(regex.test(text) === true){
panel.getSelectionModel().select(child, true);
}
});
}
}]
}]
});
Working jsFiddle : http://jsfiddle.net/tdaXs/
TIP: Take note of the second parameter in the .select() method of the TreePanel's selectionModel. This is the optional keepExisting parameter, which must be set to true when manually selecting nodes. See the docs: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.selection.Model-method-select
Hope this helps!
I have a form panel in a border layout as follows:
{
xtype: 'form',
region: 'north',
split: true,
labelAlign: 'top',
height: 130,
autoScroll: true,
collapsible: true,
listeners: {
'collapse': function () {
Ext.getCmp('slider').setTitle('Filter Events By Time');
// this is not working either
}
},
//collapsed: true,
id: 'slider',
title: 'Filter Events By Time',
border: true,
html: {
tag: 'div',
style: '',
children: [{
tag: 'div',
cls: 'slider_div',
style: 'margin-right:50px;position:relative;float:left'
}, {
tag: 'div',
cls: 'slider_unit',
style: 'margin-top:10px'
}, {
tag: 'div',
style: 'clear:left'
}, {
tag: 'div',
cls: 'startDate',
style: 'margin-right:30px;float:left'
}, {
tag: 'div',
cls: 'endDate',
style: ''
}, {
tag: 'div',
style: 'clear:left'
}]
}
}
Now, when I collapse it using following code, the collapsed panel does not have a title. I can see the title if I expand the panel.
Ext.getCmp('slider').collapse(true);
How can I get title on a collapsed form panel?
There are two small things you need to fix:
1 Method collapse, does not take argument bool, but collapse( [direction], [animate] ), all optional.
2 Use itemId instead of id:
An itemId can be used as an alternative way to get a reference to a
component when no object reference is available. Instead of using an
id with Ext.getCmp, use itemId with
Ext.container.Container.getComponent which will retrieve itemId's or
id's. Since itemId's are an index to the container's internal
MixedCollection, the itemId is scoped locally to the container --
avoiding potential conflicts with Ext.ComponentManager which requires
a unique id.
3 Fetch component reference using this inside of internal scope and use ComponentQuery outside of it. Like this:
this.setTitle('Filter Events By Tim Collapsede');
and/or
Ext.ComponentQuery.query('#slider')[0].collapse();
and also please create your components using Ext.define, and then call them in your border layout using alias/xtype. :-)
Here is a example on fiddle