Below code displays the tree structure.When i click on the image Pic.gif,it has to get replaced by new image.Similarly pic1.gif to new image,pic6.gif to new image.Can you help mw with the code where exactly it fits in this code ????
var children = [{
text: 'family',
icon: 'pic1.gif',
children: [{
text: 'parent1',
icon: 'pic2.gif',
children: [{
icon: 'pic3.gif',
text: 'children1',
leaf: true},
{
icon: 'pic4.gif',
text: 'children2',
leaf: true},
{
icon: 'pic5.gif',
text: 'children3',
leaf: true}]}],
},
{
text: 'Parent2',
icon: 'pic6.gif',
children: [{
icon: 'pic7.gif',
text: 'children4',
leaf: true},
{
icon: 'pic8.gif',
text: 'children5',
leaf: true},
{
icon: 'pic9.gif',
text: "children6",
leaf: true}]}];
Ext.onReady(function() {
var tree = new Ext.tree.TreePanel({
loader: new Ext.tree.TreeLoader(),
width: 1000,
height: 1000,
renderTo: Ext.getBody(),
root: new Ext.tree.AsyncTreeNode({
expanded: false,
leaf: false,
icon: 'pic.gif'
,
text: 'Head',
children: children
})
});
});
You need to trigger the icon change when the node is expanded using the beforeexpand listener:
var children = [{
text: 'family',
icon: 'pic1.gif',
listeners: {
'beforeexpand': function(node) {
node.setIcon('newImage.gif');
}
}
children: [{
//...
You can repeat that for your other node also.
Related
I need to create a child in a tree view how to do that kindly help. I have tried like this but it's not working.
var myLocations = new Ext.Panel({
title: 'my work',
id: 'student',
height: 100,
autoScroll: true,
iconCls: 'myPanel',
// ,autoLoad: { url: 'UserLocDetails.aspx?UserName=' + strUser }
children: [{
text: "Leaf node (<i>no folder/arrow icon</i>)",
title: 'dasdasd',
leaf: true,
id: 'myLoc',
qtitle: 'Sample Tip Title',
qtip: 'Tip body'
}]
});
You need to create a TreeStore in order to store data for a tree, and some component that can display a tree, for example a TreePanel. Try the following code, it is for Ext JS 7.3.0 Classic Material, but can be adopted to other versions:
Ext.define('myTreeStore', {
extend: 'Ext.data.TreeStore',
root: {
expanded: true
},
proxy: {
type: 'memory',
reader: {
type: 'json'
}
},
data: {
children: [{
text: 'Main 1',
leaf: true
}, {
text: 'Main 2',
children: [{
text: 'Sub 21',
leaf: true
},{
text: 'Sub 22',
leaf: true
}]
}, {
text: 'Main 3',
leaf: true
}]
}
})
Ext.application({
name: 'Fiddle',
launch: function () {
const treeStore = Ext.create('myTreeStore');
Ext.create('Ext.tree.Panel', {
rootVisible: false,
renderTo: Ext.getBody(),
title: 'Tree Example',
width: 400,
store: treeStore,
});
}
});
I am using ExtJS 4.1. I have a TreePanel which I bind to one of two TreeStore. After I rebind a store & expand collapse nodes, records are getting duplicate & I see error Uncaught TypeError: Cannot read property 'internalId' of undefined
Another issue is, I am only able to bind store once. When i call treePanel.setRootNode() second time it does not work (irrespective of whether I expand the nodes or not).
Look at this fiddle
Here is the code:
var sportsStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
id: 133,
children: [{
text: "Audi",
id: 1,
leaf: true
},
{
text: "sports cars",
expanded: true,
id: 2,
children: [{
id: 3,
text: "Porsche",
leaf: true
},
{
text: "Mustang",
id: 4,
leaf: true
}
]
},
{
text: "Jaguar",
id: 5,
leaf: true
}
]
}
});
var carStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
id: 1444,
children: [{
id: 6,
text: "Toyota",
leaf: true
},
{
text: "cars",
id: 7,
expanded: true,
children: [{
id: 8,
text: "honda",
leaf: true
},
{
text: "Nissan",
id: 9,
leaf: true
}
]
},
{
text: "Kia",
id: 10,
leaf: true
}
]
}
});
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
width: 300,
height: 450,
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'sports',
handler: function() {
alert('You clicked the sports button!');
var t = Ext.getCmp('tp');
t.setRootNode(sportsStore.getRootNode());
}
},
{
xtype: 'button',
text: 'car',
handler: function() {
alert('You clicked the car button!');
var t = Ext.getCmp('tp');
t.setRootNode(carStore.getRootNode());
}
},
{
xtype: 'treepanel',
id: 'tp',
store: sportsStore,
rootVisible: false,
lines: true
}
]
});
Just for the record you know your problem is solved in one line in 6.0 with just calling setStore() and passing as parameter the store you want right?
Here is a demo of this working in 6.0.
I played with this for a good amount of time and although my Sencha is somewhat rusty (used to be a big fan back in the day) I managed to get something working.
Now it might not be your cup of tea but it does exactly what you want ... you change the stores and expanding/collapsing works etc. The trick is I dynamically re-create the tree on every store change and set the store as the default store to that new tree. The decommissioned trees are removed by Ext.destroy etc.
Here is that Ext 4.1 working example in Fiddle
And here is the code for your reference:
Ext.define('Thing', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'text',
type: 'string'
}]
});
var sportsStore = Ext.create('Ext.data.TreeStore', {
model: 'Thing',
storeId: 'sportsStore',
clearOnLoad: true,
root: {
expanded: true,
id: 133,
children: [{
text: "Audi",
id: 1,
leaf: true
}, {
text: "sports cars",
expanded: true,
id: 2,
children: [{
id: 3,
text: "Porsche",
leaf: true
}, {
text: "Mustang",
id: 4,
leaf: true
}]
}, {
text: "Jaguar",
id: 5,
leaf: true
}]
}
});
var carStore = Ext.create('Ext.data.TreeStore', {
model: 'Thing',
storeId: 'carStore',
clearOnLoad: true,
root: {
expanded: true,
id: 1444,
children: [{
id: 6,
text: "Toyota",
leaf: true
}, {
text: "cars",
id: 7,
expanded: true,
children: [{
id: 8,
text: "honda",
leaf: true
}, {
text: "Nissan",
id: 9,
leaf: true
}]
}, {
text: "Kia",
id: 10,
leaf: true
}]
}
});
// This function does the magic by removing/then destroying the old tree and
// adding the newly created one with default new store setup
function setupTree(storeName) {
var pnl = Ext.getCmp('pnl');
var treePanel = Ext.getCmp('tp')
if (treePanel) {
pnl.remove(treePanel)
Ext.destroy(treePanel)
}
pnl.add(new Ext.create('Ext.tree.Panel', {
id: 'tp',
autoRender: true,
rootVisible: false,
store: storeName,
animate: false,
lines: true
}))
}
Ext.create('Ext.panel.Panel', {
id: 'pnl',
title: 'Car Simple Tree',
width: 300,
height: 450,
renderTo: Ext.getBody('#canvas'),
items: [{
xtype: 'button',
text: 'sports',
handler: function() {
setupTree('sportsStore')
}
}, {
xtype: 'button',
text: 'car',
handler: function() {
setupTree('carStore')
}
}],
listeners: {
afterrender: function(self) {
setupTree('sportsStore')
}
}
});
I also added ids to the stored as well as defined a model for the stores just to be more close to best practices etc.
The thing that makes this move is the setupTree function which looks for a tree with certain id, if it finds it cleans it and then creates a new one with a default store the one we clicked on.
Hope this helps.
I suggest the following approach, which may be a workaround, but ExtJS 4.1 version has some issues in UpdateIndexes() method:
define an empty tree store (baseStore) and bind it to the tree panel
on every button click, fill this empty store with data from appropriate store.
Code:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
// Stores
var baseStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
leaf: false,
children: []
}
});
var sportsStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
id: 133,
children: [
{
text: "Audi",
id: 1,
leaf: true
},
{
text: "sports cars",
expanded: true,
id: 2,
children: [{
id: 3,
text: "Porsche",
leaf: true
},
{
text: "Mustang",
id: 4,
leaf: true
}
]
},
{
text: "Jaguar",
id: 5,
leaf: true
}
]
}
});
var carStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
id: 1444,
children: [
{
id: 6,
text: "Toyota",
leaf: true
},
{
text: "cars",
id: 7,
expanded: true,
children: [
{
id: 8,
text: "honda",
leaf: true
},
{
text: "Nissan",
id: 9,
leaf: true
}
]
},
{
text: "Kia",
id: 10,
leaf: true
}
]
}
});
// Filling data
function fillStore(xparent, xnode) {
for (var i = 0; i < xnode.childNodes.length; i++) {
var current = xnode.childNodes[i];
var added = xparent.appendChild(
{
text: current.data.text,
leaf: current.data.leaf,
id: current.data.id
}
);
if (current.data.leaf === false) {
fillStore(added, current);
}
}
}
function setStore(store) {
var root = baseStore.getRootNode();
if (root.hasChildNodes()) {
root.removeAll();
}
fillStore(root, store.getRootNode());
}
// First fill
setStore(carStore);
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
width: 300,
height: 450,
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'sports',
handler: function() {
alert('You clicked the sports button!');
var t = Ext.getCmp('tp');
setStore(sportsStore);
}
},
{
xtype: 'button',
text: 'car',
handler: function() {
alert('You clicked the car button!');
var t = Ext.getCmp('tp');
setStore(carStore);
}
},
{
xtype: 'treepanel',
id: 'tp',
store: baseStore,
rootVisible: false,
lines: true
}
]
});
});
Notes:
Working fiddle can be found here.
I have a tree panel, and I am trying to add a bellow the selected item.
http://jsfiddle.net/zer8oLo7/
If you click on "Add To Root", it is working.
But. if you click on "Add To Selected", it doesn't work:
Ext.application({
name: 'Fiddle',
launch: function () {
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: "algebra",
leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
Ext.create('Ext.tree.Panel', {
//title: 'Simple Tree',
itemId: 'projectTree',
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
id: 'projectTree',
width: 200,
height: 500,
store: store,
renderTo: Ext.getBody(),
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Add To Selected',
handler: function () {
var treeNode = Ext.getCmp('projectTree').getSelectionModel().getSelection()
treeNode.appendChild({
text: 'Child 4',
leaf: false
});
}
}, {
text: 'Add to root',
handler: function () {
var treeNode = Ext.getCmp('projectTree').getRootNode();
treeNode.appendChild({
text: 'Child 4',
leaf: false
});
}
}]
}],
});
}
});
getSelection() somehow returns an array of nodes, so you need to take only first node:
...
treeNode[0].appendChild({
text: 'Child 4',
leaf: false
});
...
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'm still new to Sencha Touch/ExtJS, and I'm currently exploring the demos and getting started samples. But I stumbled upon this problem where when I insert a nested list on tab panel items I can't navigate the list items anymore.
Here's my code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
// store with data
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
},{
text: 'Coffee',
leaf: true
},{
text: 'Espresso',
leaf: true
},{
text: 'Redbull',
leaf: true
},{
text: 'Coke',
leaf: true
},{
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
},{
text: 'Wasabi Peas',
leaf: true
}]
},{
text: 'Empty Category',
items: []
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Groceries',
displayField: 'text',
dock: 'top',
store: store
});
var btnSpecTop = [
{ ui: 'back', text: 'Back'},
{ xtype: 'spacer' },
{ ui: 'default', text: 'Login' }
] // end btnSpecTop
var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}
var dockedItems = [{
xtype: 'toolbar',
dock: 'top',
title: 'Demo',
items: btnSpecTop,
defaults: { handler: tapHandler }
},
{
xtype: 'tabpanel',
layout: 'card',
dock: 'top',
fullscreen: true,
items:[{
title: 'test1',
html: '<p>test 1</p>'
},
{
title: 'test2',
html: '<p>test 2</p>',
dockedItems: nestedList
},
{
title: 'test3',
html: '<p>test 3</p>'
}]
}
]
var appPanel = new Ext.Panel({
id: 'appPanel',
fullscreen: true,
dockedItems: dockedItems
});
} // end onReady
});
Hope someone could lend a hand. Thanks!
This bug is only present on the pre-RC version of Sencha Touch. :)
I don't know which version sencha-touch you are using but in sencha-touch-1.1.0 the navigation is
working very well and there are no errors are thrown to the console,so try it again while observing your
console ,i think there has be a problem