We Keep Coding

Expand and useArrows are not working for Treepanel

I am using the below code of treepanel in my project but expnad is not happening.useArrow is also not working. But when I run same code in fidller every thing is working as expected. Can anyone help me to figure it out what am I missing.
Expand is not happening. All the value including child item displaying. Here is my code.
{
xtype: 'treepanel',
useArrows: true,
autoScroll: false,
animate: true,
enableDD: false,
title: 'Configuration',
width: 200,
height: 400,
rootVisible: false,
store: Ext.create('Ext.data.TreeStore', {
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,
expanded: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}]
}
}),
listeners: {
itemclick: function(s, r) {
alert(r.data.text);
}
}
}
Thanks for help.

What is the proper way to filtering ViewModel stores and implement to ExtJS Panel?

Through ViewModel stores I'm getting this JSON data;
{
"success": true,
"msg": "OK",
"count": 2,
"data": [
{
"firstname": "BLA",
"lastname": "BLALA",
"isactive": true,
...
},
{
"firstname": "BLAAA",
"lastname": "BLALAAA",
"isactive": false,
...
}
I have two grids on one panel and one of them will load data only with isactive: true field, other grid will load only with false. So where and how I need to filtering store to load specified data to grids?
Here is VM;
Ext.define('MyApp.view.ListingVM', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.listing',
requires: [...],
reference: 'loyaltyvm',
stores: {
// Should I define the filter on here?
bonusTrans: {
storeId: 'bonusTrans',
// reference: 'bonusTrans',
model: 'MyApp.model.BonusTrans',
autoLoad: true,
session: true,
pageSize: MyApp.Globals.LIST_PAGE_SIZE
}
}
});
This is panel's grid sample where defined both of Grids. I've tried several way to get store and filtering but couldn't be succes;
getColumns: function () {
var me = this;
var panelItems = [
{
xtype: 'container',
layout: {type: 'hbox', align: 'stretch', pack: 'start'},
items: [
xtype: 'bonustrans',
flex: 1,
title: 'Current Bonus',
getListCols: function () {
var me = this;
debugger;
// var activeStore = Ext.getStore('bonusTrans');
// var activeStore = me.viewModel.get('bonusTrans');
// var view = me.getView();
// var vm = view.getViewModel();
// var vm.getStore('bonusTrans')
// var activeStore = me.getViewModel().getStore('bonusTrans');
var activeStore = me.getViewModel('loyaltyvm').getStores('bonusTrans');
activeStore.filter('isactive', 'true');
var listCols = [
{
xtype: 'firstnamecol',
flex: 1
},
{
xtype: 'checkoutcol'
},
{
xtype: 'bonustotalcol'
}
];
return listCols;
}
//... other Grid is just defined below of this line and it should loads data only with 'isactive' field is false.

Use chained stores, fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
new Ext.container.Viewport({
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: {
stores: {
everything: {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json'
}
},
active: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: true
}]
},
inactive: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: false
}]
}
}
},
items: [{
flex: 1,
xtype: 'gridpanel',
title: 'Active',
bind: '{active}',
columns: [{
dataIndex: 'name'
}]
}, {
flex: 1,
xtype: 'gridpanel',
title: 'Inactive',
bind: '{inactive}',
columns: [{
dataIndex: 'name'
}]
}]
});
}
});

The way of chained stores is surely the best,
here you can see a working fiddle on classic
and here is the code:
Ext.application({
name: 'Fiddle',
launch: function () {
var storeAll = Ext.create('Ext.data.Store', {
storeId: 'storeAll',
fields: [{
name: 'firstname'
}, {
name: 'lastname'
}, {
name: 'active'
}],
data: [{
firstname: 'test1',
lastname: 'test1',
active: true
}, {
firstname: 'test2',
lastname: 'test2',
active: true
}, {
firstname: 'test3',
lastname: 'test3',
active: false
}]
}),
chainedStoreActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: true
}]
}),
chainedStoreNoActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: false
}]
});
Ext.create({
xtype: 'viewport',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'gridpanel',
title: 'grid ALL',
store: storeAll,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid active',
store: chainedStoreActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid inactive',
store: chainedStoreNoActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}],
renderTo: Ext.getBody()
});
}
});
The global or the "allelements" store, need to be a global store, the chained ones can be created in a viewmodel of a view.

Extjs Treestore child nodes not loading

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]);
}
});

Extjs show grid table

Hi I start to get to know extjs. I stumbled on the first problem I can not solve. I use admin template. I created a new page by adding NavigationTree another item:
ProjectName / src / store / NavigationTree.js:
Ext.define('Wolf.store.NavigationTree', {
extend: 'Ext.data.TreeStore',
storeId: 'NavigationTree',
fields: [{
name: 'text'
}],
root: {
expanded: true,
children: [
{
text: 'Dashboard',
iconCls: 'x-fa fa-desktop',
rowCls: 'nav-tree-badge nav-tree-badge-new',
viewType: 'admindashboard',
routeId: 'dashboard', // routeId defaults to viewType
leaf: true
},
{
text: 'Email',
iconCls: 'x-fa fa-send',
rowCls: 'nav-tree-badge nav-tree-badge-hot',
viewType: 'email',
leaf: true
},
{
text: 'Profile',
iconCls: 'x-fa fa-user',
viewType: 'profile',
leaf: true
},
{
text: 'Search results',
iconCls: 'x-fa fa-search',
viewType: 'searchresults',
leaf: true
},
{
text: 'FAQ',
iconCls: 'x-fa fa-question',
viewType: 'faq',
leaf: true
},
{
text: 'Pages',
iconCls: 'x-fa fa-leanpub',
expanded: false,
selectable: false,
//routeId: 'pages-parent',
//id: 'pages-parent',
children: [
{
text: 'Blank Page',
iconCls: 'x-fa fa-file-o',
viewType: 'pageblank',
leaf: true
},
{
text: '404 Error',
iconCls: 'x-fa fa-exclamation-triangle',
viewType: 'page404',
leaf: true
},
{
text: '500 Error',
iconCls: 'x-fa fa-times-circle',
viewType: 'page500',
leaf: true
},
{
text: 'Lock Screen',
iconCls: 'x-fa fa-lock',
viewType: 'lockscreen',
leaf: true
},
{
text: 'Login',
iconCls: 'x-fa fa-check',
viewType: 'login',
leaf: true
},
{
text: 'Register',
iconCls: 'x-fa fa-pencil-square-o',
viewType: 'register',
leaf: true
},
{
text: 'Password Reset',
iconCls: 'x-fa fa-lightbulb-o',
viewType: 'passwordreset',
leaf: true
}
]
},
{
text: 'Widgets',
iconCls: 'x-fa fa-flask',
viewType: 'widgets',
leaf: true
},
{
text: 'Forms',
iconCls: 'x-fa fa-edit',
viewType: 'forms',
leaf: true
},
{
text: 'Charts',
iconCls: 'x-fa fa-pie-chart',
viewType: 'charts',
leaf: true
},
{
text: 'Views by test1',
iconCls: 'x-fa fa-table',
viewType: 'testdashboard',
leaf: true
}
]
}
});
ProjectName / src / view / test / test.js:
Ext.define('Wolf.view.test.Test', {
extend: 'Ext.Container',
xtype: 'testdashboard',
controller: 'test',
viewModel: {
type: 'test'
},
cls: 'test',
scrollable: true,
items: [
{
xtype: 'bi.testviews',
userCls: 'big-100 small-100 dashboard-item shadow'
}
// {
// xtype: 'network',
//
// // 60% width when viewport is big enough,
// // 100% when viewport is small
// userCls: 'big-60 small-100 dashboard-item shadow'
// },
// {
// xtype: 'hddusage',
// userCls: 'big-20 small-50 dashboard-item shadow'
// },
// {
// xtype: 'earnings',
// userCls: 'big-20 small-50 dashboard-item shadow'
// },
// {
// xtype: 'sales',
// userCls: 'big-20 small-50 dashboard-item shadow'
// },
// {
// xtype: 'topmovies',
// userCls: 'big-20 small-50 dashboard-item shadow'
// },
// {
// xtype: 'weather',
// userCls: 'big-40 small-100 dashboard-item shadow'
// },
// {
// xtype: 'todo',
// height: 340,
// userCls: 'big-60 small-100 dashboard-item shadow'
// },
// {
// xtype: 'services',
// height: 340,
// userCls: 'big-40 small-100 dashboard-item shadow'
// }
]
});
ProjectName / src / view / test / TestController.js:
Ext.define('Wolf.view.test.TestController', {
extend: 'Ext.app.ViewController',
alias: 'controller.test',
requires: [
'Ext.util.TaskRunner'
],
onRefreshToggle: function (tool, e, owner) {
},
clearChartUpdates: function () {
},
destroy: function () {
},
onHideView: function () {
}
});
ProjectName / src / view / test / TestModel.js:
Ext.define('Wolf.view.test.TestModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test',
requires: [
'Ext.data.Store',
'Ext.data.field.Integer',
'Ext.data.field.String',
'Ext.data.field.Boolean'
],
stores: {
hddusage: {
autoLoad: true,
model: 'Wolf.model.DataXY',
proxy: {
type: 'api',
url: '~api/qg/area'
}
},
quarterlyGrowth: {
autoLoad: true,
model: 'Wolf.model.DataXY',
proxy: {
type: 'api',
url: '~api/qg/bar'
}
},
earnings: {
autoLoad: true,
model: 'Wolf.model.DataXY',
proxy: {
type: 'api',
url: '~api/qg/line'
}
},
servicePerformance: {
autoLoad: true,
model: 'Wolf.model.DataXY',
proxy: {
type: 'api',
url: '~api/qg/pie'
}
},
topMovies: {
autoLoad: true,
model: 'Wolf.model.DataXY',
proxy: {
type: 'api',
url: '~api/dashboard/movies'
}
},
networkData: {
autoLoad: true,
model: 'Wolf.model.MultiDataXY',
proxy: {
type: 'api',
url: '~api/dashboard/full'
}
},
visitors: {
autoLoad: true,
model: 'Wolf.model.MultiDataXY',
proxy: {
type: 'api',
url: '~api/dashboard/visitor'
}
},
bounces: {
autoLoad: true,
model: 'Wolf.model.MultiDataXY',
proxy: {
type: 'api',
url: '~api/dashboard/counce'
}
},
subscriptions: {
autoLoad: true,
model: 'Wolf.model.Subscription',
proxy: {
type: 'api',
url: '~api/subscriptions'
}
},
todos: {
autoLoad: true,
fields: [
{
type: 'int',
name: 'id'
},
{
type: 'string',
name: 'task'
},
{
type: 'boolean',
name: 'done'
}
],
proxy: {
type: 'api',
url: '~api/dashboard/tasks'
}
},
bicategories: {
autoLoad: true,
model: 'Wolf.Bi.model.Category',
proxy: {
type: 'api',
url: 'api/v1/bi/categories'
}
},
bicategoriesrecords: {
autoLoad: true,
model: 'Wolf.Bi.model.Records',
proxy: {
type: 'api',
url: 'api/v1/bi/views/test1/records'
}
}
}
});
projectNameBi / src / view / BIViews.js:
Ext.define('Wolf.Bi.view.test.BIViews', {
extend: 'Ext.Panel',
xtype: 'bi.testviews',
requires: [
'Ext.DataView'
],
// cls: 'dashboard-main-chart shadow',
height: 380,
bodyPadding: 15,
title: 'List',
layout: {
type: 'vbox',
align: 'stretch'
},
// tools: [
// {
// type: 'wrench',
// toggleValue: false,
// listeners: {
// click: 'onRefreshToggle'
// }
// }
// ],
columns: [
{
header: 'Name',
dataIndex: 'name'
}
],
items: [
{
xtype: 'dataview',
bind: {
store: '{bicategoriesrecords}'
},
itemTpl: new Ext.XTemplate(
// '<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<br/><span>name: </span><span>{name}</span>',
'<br/><span>id: </span><span>{id}</span>',
'<br/><span>amount: </span><span>{amount}</span>',
//'<tpl for="views"><b>{label}</b></tpl>',
'</div>'
// '</tpl>'
)
}
]
});
And this code gets the data where it gets the result of such a result:
https://postimg.org/image/hf5b0ac5v/
I would like to make these data were presented in a table with pagination. How do I achieve this? I am asking you for help.
I change BIViews.js to:
Ext.define('Wolf.Bi.view.test.BIViews', {
extend: 'Ext.grid.Grid',
xtype: 'bi.testviews',
columns: [{
text: 'Id',
dataIndex: 'id',
sortable: false,
flex: 1
}, {
text: 'Name',
dataIndex: 'name',
sortable: false,
flex: 1
}, {
text: 'Amount',
dataIndex: 'amount',
sortable: false,
flex: 1
}],
bind: {
store: '{bicategoriesrecords}'
},
dockedItems: [{
xtype: 'pagingtoolbar',
bind: {
store: '{bicategoriesrecords}'
},
dock: 'bottom',
displayInfo: true
}]
});
I see a table headers , but data is not loading , whats wrong?

Sounds like you need Ext.toolbar.Paging. Now, i don't know if it works with a dataview, so i've changed it to a grid. Without a Fiddle example i can't test this, but it should look something like this:
items: [
{
xtype: 'grid', // changed from 'dataview' to 'grid'.
bind: {
store: '{bicategoriesrecords}'
},
itemTpl: new Ext.XTemplate(
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<br/><span>name: </span><span>{name}</span>',
'<br/><span>id: </span><span>{id}</span>',
'<br/><span>amount: </span><span>{amount}</span>',
'</div>'
),
dockedItems: [{
xtype: 'pagingtoolbar',
bind: {
store: '{bicategoriesrecords}'
},
dock: 'bottom',
displayInfo: true
}]
}
]
Give that a try.

Hide checkboxes on parent nodes in a treepanel with selModel (selType:checkboxmodel)

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
}]
}]
}