We Keep Coding

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.

How to trigger a function in a specific node on treelist in Sencha Extjs? [closed]

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>

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

Association between models failing in Ext js 6

I am working on small example to understand association which is working fine in Ext js 5 but failing in Ext js 6 version.
Ext.onReady(function() {
// parent model
Ext.define('Continent', {
extend: 'Ext.data.Model',
field: ['name'],
hasMany: {
model: 'Country',
name: 'countries'
}
});
//child model
Ext.define('Country', {
extend: 'Ext.data.Model',
field: ['name'],
associations: [{
type: 'belongsTo',
model: 'Continent',
associationKey: 'countries',
}]
});
//created store for parent which contains child data
Ext.define('ContinentStore', {
extend: 'Ext.data.Store',
storeId: 'continent',
model: 'Continent',
autoLoad: true,
proxy: {
type: 'memory',
data: [{
name: 'Asia',
countries: [{
name: 'India'
}, {
name: 'Srilanka'
}, {
name: 'Bangladesh'
}]
}, {
name: 'Africa',
countries: [{
name: 'Nigeria'
}, {
name: 'Kenya'
}, {
name: 'South Africa'
}]
}, {
name: 'America',
countries: [{
name: 'West'
}, {
name: 'East'
}, {
name: 'South'
}]
}]
}
});
var continentGrid = Ext.create('Ext.grid.Panel', {
title: 'Continent Grid',
store: Ext.create('ContinentStore'),
width: '50%',
height: '100%',
listeners: {
select: function(cmp, record, index) {
//record.countries() will return new store.
// to append new store I have used reconfigure method.
Ext.getCmp('CountryGrid').reconfigure(record.countries());;
}
},
columns: [{
dataIndex: 'name',
text: 'Continent',
flex: 1
}]
});
var countryGrid = Ext.create('Ext.grid.Panel', {
title: 'Country Grid',
id: 'CountryGrid',
width: '50%',
height: '100%',
columns: [{
dataIndex: 'name',
text: 'Country',
flex: 1
}]
});
Ext.create('Ext.window.Window', {
width: 500,
height: 400,
layout: 'hbox',
autoShow: true,
items: [continentGrid, countryGrid]
})
//console.log(continent);
});
when I try to run the example in Ext js 6 verison getting below error.
Uncaught Error: hasMany ("Continent") and belongsTo ("Country") should not be used in conjunction to declare a relatextionship. Use only one.(…)
working fiddle

ExtJS 5: disable form fields in hidden card

I have a form panel with a radiogroup, and depending on the radiogroup selection, it will show some other components. If a radiofield is not selected, then its items will be hidden, as they're not part of the active card.
Now, if I have allowblank: false set on a field (and it's empty) within the hidden card, my form is still considered invalid. Being hidden means the user would not like to use it, so it should not be considered as part of the form. Here's an example.
In the example, I have 2 forms... the top form is the one that I'm curious about... is there a way to get this working without having to bind to disabled? I tried looking at hideMode, but that wasn't what I was looking for.
Ideally, I wouldn't have to create a formula for each card that I add... that seems silly. I realize I could create a generic formula, but once again, that just seems extraneous. Another option could be ditching the card layout, and binding each card to hidden and disabled, but I'm creating more formulas. Is there some sort of property I'm missing?
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('MyController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
onValidityChange: function(form, isValid, eOpts) {
this.getViewModel().set('isFormValid', isValid);
}
});
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myview',
data: {
activeItem: {
myInput: 0
}
},
formulas: {
activeCardLayout: function(getter) {
var myInput = getter('activeItem.myInput');
console.log(myInput);
return parseInt(myInput);
}
}
});
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
title: 'My Form',
controller: 'myview',
viewModel: {
type: 'myview'
},
layout: {
type: 'hbox'
},
listeners: {
validitychange: 'onValidityChange'
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
layout: {
type: 'hbox'
},
items: [{
xtype: 'button',
text: 'Save',
reference: 'saveButton',
disabled: true,
bind: {
disabled: '{!isFormValid}'
}
}]
}],
items: [{
xtype: 'radiogroup',
vertical: true,
columns: 1,
bind: {
value: '{activeItem}'
},
defaults: {
name: 'myInput'
},
items: [{
boxLabel: 'None',
inputValue: '0'
}, {
boxLabel: 'Something',
inputValue: '1'
}]
}, {
xtype: 'container',
layout: 'card',
flex: 1,
bind: {
activeItem: '{activeCardLayout}'
},
items: [{
xtype: 'container',
layout: 'fit'
}, {
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'textfield',
fieldLabel: 'hello',
allowBlank: false
}]
}]
}]
});
Ext.define('MyViewModel2', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myview2',
data: {
activeItem: {
myInput: 0
}
},
formulas: {
disableSomethingCard: function(getter) {
return getter('activeItem.myInput') !== '1';
},
activeCardLayout: function(getter) {
var myInput = getter('activeItem.myInput');
console.log(myInput, 'here');
return parseInt(myInput);
}
}
});
Ext.define('MyForm2', {
extend: 'MyForm',
title: 'My Form 2 (works)',
viewModel: {
type: 'myview2'
},
items: [{
xtype: 'radiogroup',
vertical: true,
columns: 1,
bind: {
value: '{activeItem}'
},
defaults: {
name: 'myInput'
},
items: [{
boxLabel: 'None',
inputValue: '0'
}, {
boxLabel: 'Something',
inputValue: '1'
}]
}, {
xtype: 'container',
layout: 'card',
flex: 1,
bind: {
activeItem: '{activeCardLayout}'
},
items: [{
xtype: 'container',
layout: 'fit'
}, {
xtype: 'container',
layout: 'fit',
bind: {
disabled: '{disableSomethingCard}'
},
items: [{
xtype: 'textfield',
fieldLabel: 'hello',
allowBlank: false
}]
}]
}]
});
Ext.create('MyForm', {
renderTo: Ext.getBody()
});
Ext.create('MyForm2', {
renderTo: Ext.getBody()
});
}
});