I am quite new to extjs and I would like to have an inline editor for my tree, I know there is a TreeEditor in extjs and I am not quite sure how to use it, does anyone have a small example to get me started with the Ext.tree.TreeEditor ?
Thanks
Yea, this one does suck a bit because there's no good docs online. Here's a short sample, cribbed from the docs and from ExtJS in Action:
var tree = new Ext.tree.TreePanel({
root: this.getChildren(),
height: 300,
loader: new Ext.tree.TreeLoader(),
useArrows: true,
autoScroll: true,
listeners: {
dblclick: onTreeNodeDblClick
}
});
var treeEditor = new Ext.tree.TreeEditor(tree, {}, {
cancelOnEsc: true,
completeOnEnter: true,
selectOnFocus: true,
allowBlank: false,
listeners: {
complete: onTreeEditComplete
}
});
onTreeNodeDblClick: function(n) {
treeEditor.editNode = n;
treeEditor.startEdit(n.ui.textNode);
}
onTreeEditComplete: function(treeEditor, o, n) {
//o - oldValue
//n - newValue
}
Related
I have a new ExtJS 6 application and Im trying to populate an accordion menu.
Note: This same code works perfect in ExtJS 4.2.
This is the accordion component:
Ext.define('MyApp.view.menu.Accordion', {
extend: 'Ext.panel.Panel',
alias: 'widget.mainmenu',
width: 350,
split: true,
layout: {
type: 'accordion',
autoScroll: true,
autoHeight: true,
titleCollapse: false,
animate: false,
activeOntop: true
},
collapsible: true,
floatable: false,
hideCollapseTool: false,
title: 'Menú',
});
Now, I have in my ViewController a store that I load, this is the code:
var menuPanel = Ext.ComponentQuery.query('mainmenu')[0];
storeMenu.load({
callback: function(records, op, success) {
menuPanel.removeAll();
Ext.each(records, function(rec) {
var title = rec.data.title;
var menu = Ext.create({
xtype: 'treepanel',
rootVisible: false,
title: 'This is a test'
});
menuPanel.add(menu);
});
menuPanel.updateLayout();
}
});
My store records count = 7, so I should see 7 items added to my menu, but this is what I get:
If I again do the same but adding a breakpoint in my debuggin console (image below)
Then my result is the following:
The issue is breaking my head and is really very strange, it works if I debugg adding a breakpoint in order it to work.
Any clue on this issue?
Try adding them in one call:
storeMenu.load({
callback: function(records, op, success) {
var panels;
Ext.suspendLayouts();
menuPanel.removeAll();
panels = Ext.Array.map(records, function(rec){
var title = rec.get('title');
return {
xtype: 'treepanel',
rootVisible: false,
title: title
};
});
menuPanel.add(panels);
Ext.resumeLayouts(true);
}
});
can you help with this code. Why is it that its not loading the data that i want. I manage to add the children without using this process but i want to know how to do this. Well this is better anyways thats why i want this.
db_switcher.app.tree = new Ext.tree.TreePanel({
renderTo: 'treePanel',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
width: 300,
// auto create TreeLoader
//dataUrl: 'get-nodes.php',
//root: {
// nodeType: 'async',
// text: 'Database',
// draggable: true,
// id: 'source',
// children: []
//}
loader: new Ext.tree.TreeLoader({
dataUrl: 'db_switcher/data'
//requestMethod: 'POST'
//listeners: {
// beforeload: function() {
// this.baseParams.subFolderID = clickedVal;
// }
//}
}),
root: new Ext.tree.AsyncTreeNode({
expand: true,
text: "/",
id: "/"
}),
});
db_switcher.app.tree.getRootNode().expand();
This is the exact data form:
[{"db_id":1,"db_host":"xx.xxx.x.xxx","db_name":"service_management","db_user":"xxx","db_driver":"mysql "},{"db_id":2,"db_host":"xx.xxx.x.xxx","db_name":"support_tool","db_user":"xxx","db_driver":"pgsql "}]
I hope someone can help me here.
It is kind of late for some answer, but I had the very same problem and it seems rendering doesn't work properly when leaf attribute is missing in json.
Here goes a working fiddle: https://fiddle.sencha.com/#fiddle/1s5k&view/editor
I have one Rally Sdk2 app, which has chooserDialog box.
Which displays programs, I can select multiple programs and click filter
then it displays the features for those programs but, when I again came to same dialog it does not store the last choices I made..
I tried stateful, but I am not getting it correct, below is my Dialog
And below is my ChooserDialog code
_run: function() {
var me = this;
Ext.create('Rally.ui.dialog.ChooserDialog', {
width: 470,
autoScroll: true,
height: 500,
title: 'Select to Filter',
pageSize: 100,
closable: false,
selectionButtonText: 'Filter',
itemId: 'chooser',
multiple: true,
setMultiple: true,
artifactTypes: ['PortfolioItem/Program','PortfolioItem/Epic','PortfolioItem/MMF'],
autoShow: true,
stateful: true,
stateId: 'selected-pi',
stateEvents: ['click','statesave'],
storeConfig:{
fetch: ['Name','PortfolioItemTypeName', 'Parent']
},
listeners: {
scope: me,
artifactChosen: function(selectedRecord) {
//this.down('#chooser').setValue(selectedRecord);
var filters = me._getFilters(selectedRecord);
me._drawCardBoard(me, filters);
}
}
});
},
This may or may not be possible in the rc builds of the SDK. We just made the new 2.0 version available and it has full support for the stateful mixin now.
There is even a guide for how to implement it:
http://help.rallydev.com/apps/2.0/doc/#!/guide/state
Also please note that the ChooserDialog is considered deprecated. The ArtifactChooserDialog should be a mostly drop-in replacement however.
I did not try State, but localstorage can be used to set default values:
localStorage.setItem('MyComboboxValue',Ext.getCmp('MyCombobox').getValue());
and get default values by setting value config property of the component to the value returned by:
value: localStorage.getItem('MyComboboxValue')
See a full code example of saving selections in comboboxes and checkboxes via localstorage in this github repo. The choices are retained after the page is reloaded.
UPDATE: I tried to make ArtifctChooserDialog remember selections, but it turns out that this code will not work in case of multiple selections when multiple: true due to a bug that Kyle identified.
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
_selected: [],
stateful: true,
getState: function(){
return{
selectedRef: this.selectedRecord
}
},
launch: function() {
var that = this;
Ext.create('Rally.ui.dialog.ArtifactChooserDialog', {
itemId: 'dialog',
autoShow: true,
multiple: true,
artifactTypes: ['PortfolioItem/Theme','PortfolioItem/Initiative','PortfolioItem/Feature'],
storeConfig:{
fetch: ['Name','PortfolioItemTypeName']
},
listeners: {
scope: this,
artifactchosen: function(dialog, selectedRecord) {
this._selected.push(selectedRecord);
console.log(selectedRecord);
//this.selectedRecord = dialog.getSelectedRef();
this.selectedRecord = Rally.util.Ref.getRelativeUri(selectedRecord);
this.saveState();
}
},
selectedRef: this.selectedRef
});
}
});
I am using tree editor. I need the tree node to become editable only when it is double clicked. So far I have done this
var tree = new Ext.tree.TreePanel({
root: this.getChildren(),
height: 300,
loader: new Ext.tree.TreeLoader(),
useArrows: true,
autoScroll: true,
listeners: {
dblclick: onTreeNodeDblClick
}
});
var treeEditor = new Ext.tree.TreeEditor(tree, {}, {
cancelOnEsc: true,
completeOnEnter: true,
selectOnFocus: true,
allowBlank: false,
listeners: {
complete: onTreeEditComplete
}
});
onTreeNodeDblClick: function (n) {
treeEditor.editNode = n;
treeEditor.startEdit(n.ui.textNode);
}
onTreeEditComplete: function (treeEditor, o, n) {}
I have searched the api to find something like "clicksToEdit" which we use in editor grid but cant find anything. Is there any way to do this?
Ext.tree.TreeEditor adds two event listeners (beforeclick, dblclick) to tree
so you may unsubscribe its from tree
tree.on('afterrender', function() {
tree.un('beforeclick', treeEditor.beforeNodeClick, treeEditor);
tree.un('dblclick', treeEditor.onNodeDblClick, treeEditor);
})
From API of Ext.tree.TreePanel:
beforeclick : ( Node node, Ext.EventObject e )
Fires before click processing on a node. Return false to cancel the default action.
So you could do this:
var tree = new Ext.tree.TreePanel({
root: this.getChildren(),
height: 300,
loader: new Ext.tree.TreeLoader(),
useArrows: true,
autoScroll: true,
listeners: {
dblclick: onTreeNodeDblClick,
beforeclick: function() { return false;}
}
});
Can anyone give the coding for the formation of folder structured tree in EXTJS ? how can i make it ? can anyone help for the coding of the same ?
http://dev.sencha.com/deploy/dev/examples/tree/reorder.html
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
dataUrl: 'get-nodes.php',
root: {
nodeType: 'async',
text: 'Ext JS',
draggable: false,
id: 'src'
}
});
// render the tree
tree.render('tree-div');
tree.getRootNode().expand();
});