Related
For Ext.tree.Panel nodes, arrow button is not displayed, even though useArrow property is used. While doing moveover the left of the nodes, pointer is displaying, but the visibility of arrow is false.
How can I solve this issue ??
Giving below the code, I used.
Ext.create('Ext.tree.Panel', {
useArrows: true,
autoScroll: false,
animate: true,
enableDD: false,
title: 'Configuration',
width: 200,
height: 150,
rootVisible: false,
store: [{
root: {
expanded: true,
children: [{
text: "Configure Application",
expanded: true,
children: [{
text: "Manage Application",
leaf: true
}, {
text: "Scenario",
leaf: true
}]
}, {
text: "User Configuration",
expanded: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}, {
text: "Test Configuration",
leaf: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}]
}
}]
});
Attaching the screenshot of the UI tree.
]
I am using extjs-4.2.2
I changed your store definition and now it shows arrows as expected if useArrows property is set to true in config json.
You can try that in sencha fiddle.
var root = {
expanded: true,
children: [{
text: "Configure Application",
expanded: true,
children: [{
text: "Manage Application",
leaf: true
}, {
text: "Scenario",
leaf: true
}]
}, {
text: "User Configuration",
expanded: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}, {
text: "Test Configuration",
leaf: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}]
};
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.tree.Panel', {
useArrows: true,
autoScroll: false,
animate: true,
enableDD: false,
title: 'Configuration',
width: 400,
height: 400,
renderTo: Ext.getBody(),
rootVisible: false,
store: Ext.create('Ext.data.TreeStore', {
root: root
})
});
}
});
I have a tree panel. Firebug shows that I have three children under root node. However, when I do rootNode.findChild in my controller, it always returns null. What am I missing?
Here is my controller:
Ext.define("GiipIq.controller.Problems", {
extend: "Ext.app.Controller",
refs: [{selector: '#problemsTree', ref: 'problemsTree'}],
selectFirstProblem: function() {
**var problemsTree = this.getProblemsTree();
var rootNode = problemsTree.getStore().getRootNode();
console.log(rootNode); <== I can see three child nodes under root node in firebug
var record = rootNode.findChild("id", "bit-manipulation", true);
console.log(record);**
//problemsTree.getSelectionModel().select(record); **<== select(index) does not work either**
},
init: function () {
this.control({
"#problemsTree": { afterrender: this.selectFirstProblem }
});
}
});
Here is Firebug result:
0
Object { raw={...}, modified={...}, data={...}, more...}
1
Object { raw={...}, modified={...}, data={...}, more...}
2
Object { raw={...}, modified={...}, data={...}, more...}
Here is the detail of the first one:
0
Object { raw={...}, modified={...}, data={...}, more...}
$className
"GiipIq.model.Problem"
$hasInheritableStatics
Object { setProxy=true, getProxy=true, setFields=true, more...}
$inheritableStatics
["setProxy", "getProxy", "setFields", 2 more...]
_singleProp
Object {}
alternateClassName
"Ext.data.Record"
associations
Object { allowFunctions=false, initialConfig={...}, items=[0], more...}
childNodes
[Object { raw={...}, modified={...}, data={...}, more...}, Object { raw={...}, modified={...}, data={...}, more...}]
clientIdProperty
null
config
Object {}
configMap
Object {}
data
Object { id="algorithm", text="algorithms", leaf=false, more...}
Here is my view:
Ext.define("GiipIq.view.Problem", {
extend: "Ext.window.Window",
alias: "widget.problemwindow",
titleAlign: "center",
closable: false,
layout: "border",
autoShow: true,
maximizable: true,
draggable: false,
resizable: false,
x: 0,
y: 0,
width: Ext.getBody().getViewSize().width/2,
height: Ext.getBody().getViewSize().height/2,
id: "problem-window",
getEastPanel: function() {
return {
region: "west",
xtype: "treepanel",
title: "Problems",
width: 200,
split: true,
collapsible: false,
floatable: false,
rootVisible: false,
useArrows: true,
store: Ext.create("GiipIq.store.Problems"),
id: "problemsTree",
dockedItems: [{
xtype: "toolbar",
dock: "bottom",
layout: "fit",
items: [{
xtype: "button",
text: 'Click to Run Selected Problems',
id: "run-problems-button"
}]
}],
listeners: {
checkchange: function(node, checkedStatus, options) {
console.log("vp");
}
}
};
},
getCentralPanel: function() {
return {
xtype: "tabpanel",
width: (Ext.getBody().getViewSize()/2) - 200,
bodyBorder: false,
items: [{
title: "Problem Description",
id: "problem-description-tab"
},{
xtype: "panel",
title: "Source Code",
},{
xtype: "panel",
title: "Big O Analysis",
}]
};
},
initComponent: function () {
this.items = [
this.getEastPanel(),
this.getCentralPanel()
];
this.callParent(arguments);
}
});
Here is my json data:
{
success: true,
children: [{
id: "algorithm",
text: "algorithms",
expanded: true,
leaf: false,
checked: false,
children: [
{ id: "bit-manipulation", text: "bit manipulation", leaf: true, checked: true },
{ id: "brain-teaser", text: "brain teaser", leaf: true, checked: true }
]
},{
id: "data-structure",
text: "data structures",
expanded: true,
checked: false,
leaf: false,
children: [
{ id: "array-and-string", text: "array and strings", leaf: true, checked: true },
{ id: "linked-list", text: "linked lists", leaf: true, checked: false}
]
},{
id: "knowledge-based",
text: "knowledge based",
expanded: true,
leaf: false,
checked: false,
children: [
{ text: "C and C++", leaf: true, checked: false},
{ text: "Java", leaf: true, checked: false}
]
}]
}
There is no apparent problem in the code you posted, anyway some hints:
If the tree is asynchronously loaded, the child may not be there at the time you try to find it
You can stop your code and step into the findChild method to see what's happening there and why null is returned
You can try to call findChild from console. If it works from there then it is a timing problem so your code is too early.
I have tree store.
var store = Ext.create('Ext.data.TreeStore', {
root: {
autoLoad:false,
expanded: false,
children: [
{
id:"0", text: "School Friends", expanded: true, children:
[
{
id:"1", text: "Mike", leaf: true, name: "Mike", email: "mike#stackoverflow.com", phone: "345-2222"
},
{
id:"select", text: "Laura", leaf: true, name: "Laura", email: "laura#stackoverflow.com", phone: "345-3333"
}
]
}
]
}
});
and Tree panel.
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners:{
afterrender:function(){
var record = this.getStore().getNodeById('1');
this.getSelectionModel().select(record)
}
}
});
everything works! but when I change store, using proxy request. Selection is n*ot working*
var storeTree = Ext.create('Ext.data.TreeStore', {
autoLoad:true,
expanded: true,
proxy: {
type: 'ajax',
url: 'tree.json',
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true,
// children:[]
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
I use same JSON
[
{"id":4, "text":"second",},
{
id:"0", text: "School Friends", expanded: true, children:
[
{
id:"1", text: "Mike", leaf: true, name: "Mike", email: "mike#stackoverflow.com", phone: "345-2222"
},
{
id:"select", text: "Laura", leaf: true, name: "Laura", email: "laura#stackoverflow.com", phone: "345-3333"
}
]
},
]
for example one solution:
var storeTree = Ext.create('Ext.data.TreeStore', {
autoLoad:false,
expanded: false,
proxy: {
type: 'ajax',
url: 'tree2.json',
extraParams: {o: 'SELECTED'},
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true,
children:[]
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
storeTree.load({
url: 'tree.json'
});
storeTree.on({
'load': function(store) {
var node = store.getNodeById("select"); // your id here
treePanel.getSelectionModel().select([node]);
treePanel.selectPath(node.getPath());
},
single: true
});
I really confused by ExtJs tree object, something is wrong with my code but I don't know what.
Consider I have this code:
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
How can I bind a click event to my tree's children/leaf?
Like so?
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners: {
itemclick: function(s,r) {
alert(r.data.text);
}
}
});
see this JSFiddle
I have the following code which creates an expandable tree panel inside of a tree store. My problem is that with the autoscroll true and scroll true I have a scroll bar already.
When I expand a folder in the tree a gridscroll is created and appended to the main container creating two scroll bars side by side.
how can I trap the expanding folder and prevent the grid scroller from being rendered?
I think it is setAutoScroll(false) method on the column but I can't figure out how to set it.
Ext.Loader.setConfig({
enabled: true,
disableCaching: false
});
Ext.require(['Ext.form.*', 'Ext.tree.*', 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.tip.QuickTipManager', 'Ext.ux.grid.FiltersFeature', 'Ext.ModelManager']);
Ext.onReady(function() {
Ext.define('model1', {
extend: 'Ext.data.Model',
fields: [{
name: 'text',
type: 'string'
}, {
name: 'pathInfo',
type: 'string'
}]
});
storeAddTo = Ext.create('Ext.data.TreeStore', {
model: 'model1',
folderSort: true,
root: {
expanded: true,
children: myJSONTextAddTo
}
});
var treeConfigAddTo = {
//title: 'Select an existing folder from the list',
id: 'grid-foldersAddTo',
width: 320,
height: 330,
store: storeAddTo, //
rootVisible: false,
useArrows: true,
singleExpand: false,
renderTo: 'grid-foldersAddTo',
columns: [{
xtype: 'treecolumn',
text: 'Folders',
flex: 1,
sortable: false,
dataIndex: 'text',
filterable: false
}],
viewConfig: {
autoScroll: true,
scroll: true,
}
}
treeAddTo = Ext.create('Ext.tree.Panel', treeConfigAddTo);
});
data (myJSONTextAddTo)
[{
text: "Cars",
"pathInfo": "Cars",
children: [{
text: "Luxury",
"pathInfo": "Cars\\Luxury\\Bentley",
children: [{
text: "Bentley",
"pathInfo": "Cars\\Luxury\\Bentley",
children: []
}, {
text: "Porsche",
"pathInfo": "Cars\\Luxury\\Porsche",
children: [{
text: "Cars",
"pathInfo": "Cars\\Luxury\\Porsche\\Cars\\Luxury\\Porsche",
children: [{
text: "Luxury",
"pathInfo": "Cars\\Luxury\\Porsche\\Cars\\Luxury\\Porsche",
children: [{
text: "Porsche",
"pathInfo": "Cars\\Luxury\\Porsche\\Cars\\Luxury\\Porsche",
children: []
}]
}]
}]
}]
}, {
text: "Dealers",
"pathInfo": "Cars\\Dealers",
children: []
}, {
text: "Ferrari",
"pathInfo": "Cars\\Ferrari",
children: []
}, {
text: "Sports",
"pathInfo": "Cars\\Sports",
children: [{
text: "Chevy",
"pathInfo": "Cars\\Sports\\Chevy",
children: []
}]
}, {
text: "mycar",
"pathInfo": "Cars\\mycar",
children: []
}, {
text: "test2",
"pathInfo": "Cars\\test2",
children: []
}, {
text: "test3",
"pathInfo": "Cars\\test3",
children: []
}, {
text: "test4",
"pathInfo": "Cars\\test4",
children: []
}, {
text: "test5",
"pathInfo": "Cars\\test5",
children: []
}, {
text: "test 6",
"pathInfo": "Cars\\test 6",
children: [{
text: "Test 6.1",
"pathInfo": "Cars\\test 6\\Test 6.1",
children: []
}]
}]
}]
Take a look at this fiddle: http://jsfiddle.net/dbrin/Qc5XV/
I removed the view configs you had and removed the height constraint to allow the tree to grow. I hope that's what you were after. If you wanted to fix the height then uncomment the height config and the tree panel will auto scroll when needed. This seems right to me. You might have other panels surrounding the tree that are giving you problems if so, please let me know the layout and we can troubleshoot it further. Hope this helps.