Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am a newbie to Sencha ExtJS. I want to add a tab when the user clicks on the University node. what should I use? I search a lot on the internet but could not find the answer which exactly addresses my issue.
items: [{
region: 'west',
width: 200,
reference: 'treelistContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
itemId:'addNewTab',
border: true,
scrollable: 'y',
bufferedRenderer: false,
animate: true,
rootVisible: false,
items: [{
xtype: 'treelist',
reference: 'treelist',
itemId:'childpanel',
store: {
root: {
expanded: true,
children: [{
text: 'Home',
iconCls: 'x-fa fa-home',
children: [{
text: 'Messages',
iconCls: 'x-fa fa-inbox',
leaf: true
}]
}, {
text: 'Users',
iconCls: 'x-fa fa-user',
children: [{
text: 'Tagged',
iconCls: 'x-fa fa-tag',
leaf: true
}, {
text: 'Inactive',
iconCls: 'x-fa fa-trash',
leaf: true
}]
}, {
text: 'Groups',
iconCls: 'x-fa fa-group',
leaf: true
}, {
text: 'Settings',
iconCls: 'x-fa fa-wrench',
children: [{
name:'haseeb',
text: 'University',
iconCls: 'x-fa fa-university',
leaf: true,
itemId: 'bar2',
// cls='mycls'
}]
}]
}
},
},
}],
As I saw you are in Modern Toolkit. So you need first to find the right listener for treelist, documentation
listeners: {
selectionchange : function(tree, rec) {
if (rec.data.text === 'University')
{
//Call the tab from here
}
}
},
Your code updated:
items: [{
region: 'west',
width: 200,
reference: 'treelistContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
itemId:'addNewTab',
border: true,
scrollable: 'y',
bufferedRenderer: false,
animate: true,
rootVisible: false,
items: [{
xtype: 'treelist',
reference: 'treelist',
itemId:'childpanel',
listeners: {
selectionchange : function(tree, rec) {
if (rec.data.text === 'University')
{
//Call the tab from here
}
}
},
store: {
root: {
expanded: true,
children: [{
text: 'Home',
iconCls: 'x-fa fa-home',
children: [{
text: 'Messages',
iconCls: 'x-fa fa-inbox',
leaf: true
}]
}, {
text: 'Users',
iconCls: 'x-fa fa-user',
children: [{
text: 'Tagged',
iconCls: 'x-fa fa-tag',
leaf: true
}, {
text: 'Inactive',
iconCls: 'x-fa fa-trash',
leaf: true
}]
}, {
text: 'Groups',
iconCls: 'x-fa fa-group',
leaf: true
}, {
text: 'Settings',
iconCls: 'x-fa fa-wrench',
children: [{
name:'haseeb',
text: 'University',
iconCls: 'x-fa fa-university',
leaf: true,
itemId: 'bar2',
// cls='mycls'
}]
}]
}
},},}],
You can listen to the itemclick event on the tree and check that text of clicked record is University i.e record.text, Like this:
listeners:{
itemclick:function(me, record, item, index, e, eOpts){
if(record.data.text==='University'){
// your adding tab functionality comes here
}
}
}
Sample Code:
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: 'Home',
iconCls: 'x-fa fa-home',
children: [{
text: 'Messages',
iconCls: 'x-fa fa-inbox',
leaf: true
}]
}, {
text: 'Users',
iconCls: 'x-fa fa-user',
children: [{
text: 'Tagged',
iconCls: 'x-fa fa-tag',
leaf: true
}, {
text: 'Inactive',
iconCls: 'x-fa fa-trash',
leaf: true
}]
}, {
text: 'Groups',
iconCls: 'x-fa fa-group',
leaf: true
}, {
text: 'Settings',
iconCls: 'x-fa fa-wrench',
children: [{
name:'haseeb',
text: 'University',
iconCls: 'x-fa fa-university',
leaf: true,
itemId: 'bar2',
// cls='mycls'
}]
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
store: store,
width: 200,
rootVisible: false,
renderTo: Ext.getBody(),
listeners:{
itemclick:function(me, record, item, index, e, eOpts){
if(record.data.text==='University')
alert('University is clicked');
}
}
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.2.1/ext-all-debug.js"></script><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/ext-theme-neptune-debug.js"></script>
I could see the child nodes loading in the first one and strangely enough not in the second one ?
Any thoughts
Fiddle here
https://fiddle.sencha.com/#view/editor&fiddle/1lss
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ComplexTree', {
extend: 'Ext.data.TreeStore',
alias: 'store.complextree',
storeId: 'ComplexTree',
root: {
expanded: true,
children: [{
text: 'test',
leaf: true
}, {
text: 'test2',
expanded: true,
children: [{
text: 'test21',
leaf: true
}, {
text: 'test22',
leaf: true
}]
}, {
text: 'test3',
leaf: true
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Complex Tree',
width: 200,
height: 200,
store: Ext.create('ComplexTree'),
rootVisible: false,
renderTo: Ext.getBody()
});
Ext.create('Ext.tree.Panel', {
title: 'Complex Tree',
width: 200,
height: 200,
store: Ext.create('ComplexTree'),
rootVisible: false,
renderTo: Ext.getBody()
});
}
});
Because they are sharing the data set (object references). Modify your store like so:
Ext.define('ComplexTree', {
extend: 'Ext.data.TreeStore',
alias: 'store.complextree',
constructor: function (config) {
config = config || {};
config.root = {
expanded: true,
children: [{
text: 'test',
leaf: true
}, {
text: 'test2',
expanded: true,
children: [{
text: 'test21',
leaf: true
}, {
text: 'test22',
leaf: true
}]
}, {
text: 'test3',
leaf: true
}]
};
this.callParent([config]);
}
});
I have managed to implement a treepanel and everything seems to be working. I have data like so ( see below). My fields I "name" which holds below things like "ItemA", "ProductA" which are nodes and the "Iron" which is a leaf and a property called "Available" which is true / false (boolean but represented as a string).
When clicking the sort column for the boolean, it sorts them but sorts then as whole. i.e. I would only want to sort the booleans in each group. Currently it sorts them as group of items it seems. So the nodes under ItemB change order, not just the order of the boolean column. I hope this makes sense.
I have the column model set to this
sortType: Ext.data.SortTypes.asUCString
I have also tried changing the property of "folderSort" between true and false in the treepanel but it makes no difference.
Any ideas?
Here's an example of my data to try and visualize it better.
ItemA
ProductA
Iron true
ItemB
Product123
House true
Garage false
Misc false
Product1443
HouseF true
NewItem false
As I understand from your question, you can't only sort the leafs instead of nodes. So, you can specify your leaf and node models and then set the "available" property to leafs. Please check this fiddle: https://fiddle.sencha.com/#fiddle/upv
If that's not what you are looking for or it's not possible to change your treepanel model, please change the fiddle and add your treepanel with its model. Hope it helps.
Ext.define('model.ItemsRoot', {
extend: 'Ext.data.TreeModel',
childType: 'model.Items',
fields: [{
name: 'text',
mapping: 'name'
},{
name: 'Available',
type: 'boolean'
}]
});
Ext.define('model.Items', {
extend: 'Ext.data.TreeModel',
childType: 'model.Products',
fields: [{
name: 'text',
mapping: 'name'
}]
});
Ext.define('model.Products', {
extend: 'Ext.data.TreeModel',
childType: 'model.ItemNames',
fields: [{
name: 'text',
mapping: 'name'
}]
});
Ext.define('model.ItemNames', {
extend: 'Ext.data.TreeModel',
fields: [{
name: 'text',
mapping: 'name'
}]
});
var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'model.ItemsRoot',
root: {
text: '',
expanded: true,
children: [{
name: "Item A",
expanded: true,
children: [{
name: "Product A",
expanded: true,
children: [{
name: "Iron",
leaf: true,
Available: true
}]
}]
}, {
name: "Item B",
expanded: true,
children: [{
name: "Product B",
expanded: true,
children: [{
name: "House",
Available: false,
leaf: true
}, {
name: "Garage",
leaf: true,
Available: true
}, {
name: "Misc",
leaf: true,
Available: false
}]
}, {
name: "Product C",
expanded: true,
children: [{
name: "House F",
leaf: true,
Available: true
}, {
name: "New Item",
leaf: true,
Available: false
}]
}]
}]
}
});
var treePanel = Ext.create('Ext.tree.Panel', {
store: treeStore,
rootVisible: false,
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Items',
flex: 2,
sortable: true,
dataIndex: 'name'
}, {
//xtype: 'checkcolumn',
header: 'Available',
dataIndex: 'Available',
//stopSelection: false,
//menuDisabled: true,
editor: {
xtype: 'checkbox',
}
}],
renderTo: Ext.getBody()
});
In a ExtJs app i want to hide or delete the checkboxes in the parent node from a treepanel, i mean there are any way to hide the check of a principal categorie and only put in the child nodes? and put a radiobutton in these child nodes; I'm using extjs 5.1 and there is the code
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tip.*',
'Ext.tree.*'
]);
Ext.define('Post', {
extend: 'Ext.data.TreeModel',
idProperty: 'postid',
fields: [{
name: "title",
convert: undefined
}, {
name: "threadid",
convert: undefined
}, {
name: "username",
convert: undefined
}, {
name: "userid",
convert: undefined
}, {
name: "dateline",
type: 'date',
dateFormat: 'timestamp'
}, {
name: "postid",
convert: undefined
}, {
name: "forumtitle",
convert: undefined
}, {
name: "forumid",
convert: undefined
}, {
name: "replycount",
type: 'int',
convert: undefined
}, {
name: "lastpost",
dateFormat: 'timestamp',
convert: undefined
}, {
name: "excerpt",
convert: undefined
}]
});
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
function renderTitle(value, p, record) {
return value ? Ext.String.format(
'{0}',
value,
record.data.threadid
) : '';
}
function checkPrenderCapa() {
}
var store = Ext.create('Ext.data.TreeStore', {
model: 'Post',
proxy: {
type: 'ajax',
reader: 'json',
url: 'forum-data.json'
},
lazyFill: false
});
var tree = Ext.create('Ext.tree.Panel', {
title: 'Tabla de Contenido',
width: 500,
height: 400,
renderTo: Ext.getBody(),
reserveScrollbar: true,
collapsible: true,
collapseDirection: Ext.Component.DIRECTION_LEFT,
loadMask: true,
useArrows: true,
draggable : true,
rootVisible: false,
store: store,
animate: true,
selModel: {
selType: 'checkboxmodel'
},
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Capa',
flex: 2.5,
sortable: true,
dataIndex: 'forumtitle'
},{
text: 'Metadato',
flex: 1,
dataIndex: 'username',
sortable: true
}, {
text: 'Activación',
flex: 2,
dataIndex: 'title',
renderer: renderTitle
}],
tbar: [{
labelWidth: 130,
xtype: 'triggerfield',
fieldLabel: 'Nombre de la capa',
triggerCls: 'x-form-clear-trigger',
onTriggerClick: function() {
this.reset();
store.clearFilter();
this.focus();
},
enableKeyEvents: true,
listeners: {
keyup: function() {
var field = tree.down('textfield'),
v;
try {
v = new RegExp(field.getValue(), 'i');
store.filter({
filterFn: function(node) {
var children = node.childNodes,
len = children && children.length,
// Visibility of leaf nodes is whether they pass the test.
// Visibility of branch nodes depends on them having visible children.
visible = node.isLeaf() ? v.test(node.get('title')) : false,
i;
// We're visible if one of our child nodes is visible.
// No loop body here. We are looping only while the visible flag remains false.
// Child nodes are filtered before parents, so we can check them here.
// As soon as we find a visible child, this branch node must be visible.
for (i = 0; i < len && !(visible = children[i].get('visible')); i++);
return visible;
},
id: 'titleFilter'
});
} catch (e) {
field.markInvalid('Invalid regular expression');
}
},
buffer: 250
}
}]
});
});
Here's a capture of the code:
https://drive.google.com/file/d/0B6CZzmxH4VxrTVo2RGhjbzZiVEk/view?usp=sharing
I know it's not exactly what you're looking for, but this is the only way I know to do something similar.
You can add a checkbox to tree nodes by having a checked property on the node. If checked:true, then the checkbox will be rendered as checked. Only nodes with a checked property will have the checkbox.
Sencha Fiddle Demo
Relevant Code:
root: {
expanded: true,
children: [{
text: "detention",
leaf: true,
checked: false
}, {
text: "homework",
expanded: true,
checked: false,
children: [{
text: "book report",
leaf: true,
checked: true
}, {
text: "algebra",
leaf: true
}]
}, {
text: "other",
expanded: true,
children: [{
text: "buy lottery tickets",
leaf: true,
checked: false
}]
}]
}
var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
//useArrows: true,
frame: true,
title: 'Vehicle List',
region:'west',
width: 200,
root: {
expanded: true
},
checked : false,
height: 250,
dockedItems: [{
xtype: 'toolbar',
items: {
text: 'Get checked nodes',
handler: function(){
var records = tree.getView().getChecked(),
names = [];
Ext.Array.each(records, function(rec){
names.push(rec.get('MainID'));
});
Ext.MessageBox.show({
title: 'Selected Nodes',
msg: names.join('<br />'),
icon: Ext.MessageBox.INFO
});
}
}
}]
});
How can I get the tree to expand? I have tried
root: {
expanded: true
}
But it still doesn't work.
Add this to your model:
{ name: 'expanded', type: 'boolean', defaultValue: true, persist: false },
Or alternatively set expanded to true for each node you return from the server.
root: {
expanded: true
}
This should be within the definition of your store.
Something like the below.
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "a", leaf: true },
{ text: "b", expanded: true, children: [
{ text: "c", leaf: true },
{ text: "d", leaf: true}
] }
]
}
});