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!
Related
I am creating a table which needs editable fields..
This jquery element is appended to the page:
var container = $('#up-modal .modal-body');
var table = $('<table></table>');
table.attr('id','up-table');
table.attr('style','width:auto;');
table.attr('data-toggle', 'table');
table.attr('data-search', 'true');
table.attr('data-maintain-selected', 'true');
table.attr('data-pagination','true');
table.attr('data-page-size',3);
container.append(table);
following this, the bootstrap table function is called
$("#up-table").bootstrapTable({
columns:[
{
field: 'id',
title: 'ID',
align: 'center'
},
{
field: 'Permission',
title: 'Permission',
searchable: true
},
{
field: 'Extended',
name: 'Extended',
title: 'Properties',
editable:{
type: 'text',
pk: 1,
title: 'Modify Properties',
name: 'Extended',
validate: function(value){
value = $.trim(value);
try{
JSON.parse(value);
}catch(e){
return 'Invalid json provided for properties';
}
}
}
},
{
field: 'Access',
title: 'Access',
checkbox:true
}
],
data: tableData
});
The table is drawn correctly, but the fields are not editable. I can call $('.editable').editable(options) after the table is built and that works fine, but that stops working when pagination is involved.
I am using this example as a reference https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html
oh, and I should mention the proper scripts and css files are locally hosted and being included correctly in my html.
Library quick links:
https://vitalets.github.io/bootstrap-editable/
http://bootstrap-table.wenzhixin.net.cn/
Woops. As it turns out, there are compatibility issues with x-editable, bootstrap 3 and bootstrap-tables.
To fix this all I had to do was include the bootstrap-editable-tables extension
https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable
Im using ExtJS 5.1.
I have a Viewport with a Ext.tree.Panel at west region and a simple Ext.panel.Panel at a center region. When you click one item of the treepanel i want to load some data inside Ext.panel.Panel at the center region but i don't know exactly how to do.
Now i have an itemclick listener in Ext.tree.Panel who obtain the id of the clicked item. what more do i need to create something like this ExtJS 4 example ?
APP.JS code:
var arbolFrameworks = Ext.create('Ext.tree.Panel', {
title : 'Arbol Frameworks',
width : 300,
height : 600,
style: 'padding: 3 3 3 3;',
listeners : {
itemclick : function (view, record, item, index, e) {
alert(record.getId());
}
},
root : {
text : 'Componentes',
expanded : true,
children : [{
text : 'Grids',
expanded : true,
children :
[ {
id: 'grid_framework',
text : 'Grid de frameworks',
leaf : true
}, {
id: 'grid_personaje',
text : 'Grid de personajes',
leaf : true
}
]
},{
text : 'Árbol',
expanded : true,
children : [{
id: 'arbol_prueba',
text : 'Arbol de prueba',
leaf : true
}
]
},{
text : 'Gráficas',
expanded : true,
children : [{
id: 'grafica_1',
text : 'Básica',
leaf : true
},{
id: 'gráfica_2',
text : 'Pie',
leaf : true
}
]
}
]
}
});
var contenido = Ext.create('Ext.panel.Panel', {
title: 'Prueba',
style: 'padding: 3 3 3 3',
html: 'prueba'
})
// Panel
Ext.create('Ext.Viewport', {
layout:'border',
defaults: {
collapsible: true,
},
items: [{
title: 'Barra de navegacion',
region:'west',
width: 300,
items:[arbolFrameworks]
},{
title: 'Contenido principal',
collapsible: false,
region:'center',
items: [contenido]
}]
});
what more do i need to create something like this ExtJS 4 example ?
In a nut shell, once you've got the id of the clicked item, you make an AJAX call to retrieve the relevant content and, in the callback, do contenido.update(contentFromServer).
Looking at the source code of the example, installing and playing with it locally will help a lot.
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 new to Ext-Js and I've gotten a html editor with some plugins from github, now I've got a button on the editor that is supposed to pop an alert box with the contents of the text area.
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var top = Ext.create('Ext.form.Panel', {
frame:true,
title: 'HtmlEditor plugins',
bodyStyle: 'padding:5px 5px 0',
//width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
items: [{
xtype: 'htmleditor',
fieldLabel: 'Text editor',
height: 300,
plugins: [
Ext.create('Ext.ux.form.plugin.HtmlEditor',{
enableAll: true
,enableMultipleToolbars: true
})
],
anchor: '100%'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
top.render(document.body);
});
I know I'm supposed to add
handler:function(){alert(someextjscodehere)}
but I have no idea what function returns it, nor can I find it on google...
You need to use the getValue method of the editor to retrieve its content.
handler is an option of the button.
You'll need a reference to the editor in the handler, to get its content. You can get it from the form with the findField method, or with a component query.
Here's how to update your code to alert the content of the editor when clicking the save button. I've added a second save button to show you the component query method. I've tested it in this fiddle.
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var top = Ext.create('Ext.form.Panel', {
frame:true,
title: 'HtmlEditor plugins',
bodyStyle: 'padding:5px 5px 0',
//width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
items: [{
xtype: 'htmleditor',
name: 'htmlContent', // add a name to retrieve the field without ambiguity
fieldLabel: 'Text editor',
height: 300,
/* plugins: [
Ext.create('Ext.ux.form.plugin.HtmlEditor',{
enableAll: true
,enableMultipleToolbars: true
})
],
*/ anchor: '100%'
}],
buttons: [{
text: 'Save'
,handler: function() {
var editor = top.getForm().findField('htmlContent');
alert(editor.getValue());
}
},{
text: 'Save 2'
,handler: function() {
// You can grab the editor with a component query too
var editor = top.down('htmleditor');
alert(editor.getValue());
}
},{
text: 'Cancel'
}]
});
top.render(document.body);
});
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);