We Keep Coding

Conditionally bind ViewModel to Tree panel

We have build a managementment system in extjs, in this system we have a dialog which makes it possible to select multiple pages, save the selection which closes the dialog.
We have reused the same component 'Ext.Tree.Panel' for a single select page, this tree should not have checkboxes and immediately save and close the dialog on itemClick. We have both trees working... but not at the same time.
We did create two separate ViewModels for both trees. Would it be possible to change the ViewModel based a property of the parent Store.
Or are we pursuing the wrong direction and is there a better alternative to use the same Tree component with different behaviour. Thx & See the code of the elements in place below
Selecttree.js
Ext.define('EurocampingsCMS.view.page.SelectTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.page-select-tree',
requires: [
'EurocampingsCMS.controller.page.SelectTree',
'EurocampingsCMS.view.page.MultiSelectViewModel',
'EurocampingsCMS.view.page.SingleSelectViewModel'
],
controller: 'page-select-tree',
viewModel: 'page.select',
loadMask: true,
rootVisible: false,
overflowY: true,
config: {
rootId: null,
},
title: 'Pagina\'s',
hideHeaders: true,
animCollapse: true,
enableSort: false,
collapseFirst: false,
multiSelect: false,
border: 0,
listeners: {
itemclick: 'onItemClick',
afterrender: 'onGridAfterRender',
reconfigure: 'onGridReconfigure'
},
bind: {
store: '{pages}'
},
columns: [
{
xtype: 'treecolumn',
dataIndex: 'name',
flex: 2,
editor: {
xtype: 'textfield',
selectOnFocus: true
},
renderer: function(value, metaData, list, rowIndex, colIndex, store, view) {
if (!list.get('active')) {
return '<span class="inactive">' + value + '</span>';
}
return value;
}
}
]
});
MultiSelectViewModel.js
Ext.define('EurocampingsCMS.view.page.MultiSelectViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.page.select',
requires: [
'EurocampingsCMS.store.page.Select',
'EurocampingsCMS.view.ViewModel'
],
config: {
singleSelect: false,
},
stores: {
pages: {
type: 'page.select',
autoLoad: true,
checkedItems: '{checkedItems}',
proxy: {
extraParams: {
locale: '{current.locale}'
}
},
},
}
});
SingleSelectViewModel.js
Ext.define('EurocampingsCMS.view.page.SingleSelectViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.page.page',
requires: [
'EurocampingsCMS.store.page.Select',
'EurocampingsCMS.view.ViewModel'
],
config: {
singleSelect: true,
},
stores: {
pages: {
type: 'page',
autoLoad: true,
proxy: {
extraParams: {
locale: '{current.locale}'
}
}
},
}
});

Can´t load store of a combo in ExtJS4

I can´t load the store data when the view is loaded.
This is my store:
(strEstadosMtoOrganismos.js)
Ext.define('TelicitaApp.store.filtros.strEstadosMtoOrganismos', {
extend: 'Ext.data.Store',
model: 'TelicitaApp.model.filtros.mdlEstadosMtoOrganismos',
autoLoad: false,
proxy: {
type: 'ajax',
api: {read: './data/php/filtros/Tmc_EstadosMtoOrganismos.php?despliegue='+TelicitaApp.Settings.despliegue},
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success'
}
}
});
This is my view:
(viewGridMtoOrganismos.js)
Ext.define('TelicitaApp.view.mantenimientos.organismos.viewGridMtoOrganismos', {
extend: 'Ext.grid.Panel',
alias: 'widget.viewGridMtoOrganismos',
requires: [
],
initComponent: function() {
var toolbar1 = {
xtype : 'toolbar',
dock : 'top',
items: [
{
iconCls:'limpiar-icon', text:'Limpiar', handler: function() {},
},
'->',
{
iconCls:'refresh', text:'Recargar', handler: function() {},
}
]
};
var toolbar2 = {
xtype: 'toolbar',
dock: 'top',
items: [
{text:'<span style="color:#C85E00;">Estado</span>'},
{
xtype: 'combo',
value: 'Todos',
queryMode: 'remote',
triggerAction: 'all',
editable: false,
displayField: 'label',
valueField: 'value',
store: 'filtros.strEstadosMtoOrganismos'
}
]
}
Ext.apply(this, {
frame: true,
bodyPadding: '5 5 0',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
forceFit: true,
height: 300,
stripeRows: true,
loadMask: true,
tbar: {
xtype: 'container',
layout: 'anchor',
defaults: {anchor: '0'},
defaultType: 'toolbar',
items: [
toolbar1,toolbar2
]
},
columns: [
{header:'<span style="color:blue;">Id</span>', xtype: 'numbercolumn',format:'0', width:35, sortable: true},
]
});
this.callParent(arguments);
}
});
This is my controller:
(ctrlMtoOrganismos.js)
Ext.define('TelicitaApp.controller.ctrlMtoOrganismos', {
extend: 'Ext.app.Controller',
models:[
'mantenimientos.organismos.mdlMtoOrganismos',
'filtros.mdlEstadosMtoOrganismos'
],
stores:[
'mantenimientos.organismos.strMtoOrganismos',
'filtros.strEstadosMtoOrganismos'
],
views: [
'mantenimientos.organismos.viewModuloMtoOrganismos'
],
refs: [
],
init: function() {
this.control({
});
},
onLaunch: function() {
},
});
If I set the autoload property in the store to true,it load the data when the app launch.But I want to load the data when the view is loaded.
Once the view is loaded,if i expand the combo it launch the php file taht fills the combo,but I want it to load the data automatically after the view is loaded,not when you expand the combo.

Replace
this.callParent(arguments);
}
with
this.callParent(arguments);
this.down('combo').getStore().load();
}
and you're good to go.

ExtJS store without url for TreePanel

Model:
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'product', type: 'string'},
// {name: 'active', type: 'string'},
{name: 'balance', type: 'string'}
]
});
Store:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Product',
proxy: {
type: 'ajax',
url: 'treegrid.json'
},
folderSort: true
});
TreeGrid:
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn',
text: 'Ürün',
flex: 2,
sortable: true,
dataIndex: 'product'
},{
text: 'Bakiye',
flex: 1,
dataIndex: 'balance',
sortable: true
}]
});
this.add(tree);
this.doLayout();
My Problem:
I'm able to load my treegrid with this url json store. But I want to load it with decoded json object which comes from the server. Something like below:
Store:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Product',
root: inData,
folderSort: true
});
inData:
{"text":".",
"children":[
{"product":"Mevduat","balance":"15000","expanded":"true","children":[
{"product":"Vadesiz Mevduat","balance":"7000","expanded":"true","children":[
{"product":"Vadesiz Hesap","balance":"3500","leaf":"true"},
{"product":"fk Hesap","balance":"3500","leaf":"true"}
]
},
{"product":"Vadeli Mevduat","balance":"8000","expanded":"true","children":[
{"product":"Kirik Vadeli Hesap","balance":"3000","leaf":"true"},
{"product":"Birikimli Gelecek Hesabı","balance":"5000","leaf":"true"}
]}]
},
{"product":"Bireysel Krediler","balance":"40000","expanded":"true","children":[
{"product":"Konut Kredisi","balance":"15000","leaf":"true"},
{"product":"Arsa Kredisi","balance":"25000","leaf":"true"}
]
}]}
But if I use inData json object my tree panel doesn't display texts.

Use a memory proxy and the root config:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Product',
proxy: {
type: 'memory'
},
root: inData,
folderSort: true
});

Combobox does not set the good value on load, but rather blank

I have a combobox and when I load it with a particular value (not empty/default), it rendered blank.
I think it's because the properties name and valueField are different. Create/update works and the values are in the combo. Can you help?
{
xtype: 'combobox',
anchor: '100%',
fieldLabel: 'Organisme',
name: 'idOrganismePriseEnCharge',
displayField: 'Organisme',
store: 'Organismes',
valueField: 'idOrganisme'
}
My Model:
Ext.define('MG.model.TypeAide', {
extend: 'Ext.data.Model',
idProperty: 'idTypeAide',
fields: [
{
name: 'idTypeAide'
},
{
name: 'TypeAide'
},
{
name: 'Montant'
},
{
name: 'idOrganismePriseEnCharge'
},
{
name: 'Organisme'
}
]
});
My store:
Ext.define('MG.store.TypesAides', {
extend: 'Ext.data.Store',
requires: [
'MG.model.TypeAide'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MG.model.TypeAide',
storeId: 'StoreTypesAides',
proxy: {
type: 'ajax',
api: {
create: 'http://localhost/MG/php/TypesAides.php?action=create',
read: 'http://localhost/MG/php/TypesAides.php?action=read',
update: 'http://localhost/MG/php/TypesAides.php?action=update',
destroy: 'http://localhost/MG/php/TypesAides.php?action=destroy'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}
});

valueField should match a field from the model you're using. In your case it's idOrganisme and there is no such field in the model.

How do I fully reload my Sencha Touch App when tapping 'refresh'?

My list view layout is similar to Pinterest, with absolutely positioned blocks.
Unfortunately, this seems to require a full re-initialization at refresh.
If reload only the store (as below) the new blocks are incorrectly positioned.
How do I reload the app when the user clicks on refresh?
This is my View:
Ext.require(['Ext.data.Store', 'MyApp.model.StreamModel'], function() {
Ext.define('MyApp.view.HomeView', {
extend: 'Ext.navigation.View',
xtype: 'homepanel',
requires: [
'Ext.dataview.List',
],
config: {
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
navigationBar: {
items: [
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
align: 'left',
action: 'refreshButton'
}
]
},
items: {
title: 'My',
xtype: 'list',
itemTpl: [
'<div class="post">',
...
'</div>'
].join(''),
store: new Ext.data.Store({
model: 'MyApp.model.StreamModel',
autoLoad: true,
storeId: 'stream'
}),
}
}
});
});
Model:
Ext.define('MyApp.model.StreamModel', {
extend: 'Ext.data.Model',
config: {
fields: [
'post_id',
'comments'
],
proxy: {
type: 'jsonp',
url: 'http://My.com/app',
reader: {
type: 'json',
}
}
}
});
and my Controller:
Ext.define('MyApp.controller.RefreshController', {
extend: 'Ext.app.Controller',
requires: [
'Ext.navigation.View'
],
config: {
control: {
'button[action=refreshButton]': {
tap: 'refresh'
}
}
},
refresh: function() {
// Ext.StoreMgr.get('stream').load();
// here I'd like to reload the app instead
// not just the store
}
});

refresh: function() {
// Ext.StoreMgr.get('stream').load();
// here I'd like to reload the app instead
// not just the store
window.location.reload();
}