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}'
}
}
},
}
});

Controller's listeners catching events (panel clicks) from other views

I have this weird issue with ExtJS 4.2.1.
I have a controller whose listeners catch events from a view that it shouldn't.
Here's said controller:
Ext.define('Customer_Portal_UI.controller.NavigationMenu', {
extend: 'Ext.app.Controller',
init: function () {
this.control({
'panel': {
render: function (panel) {
panel.body.on('click', function (panel, e) {
alert('onclick');
});
}
}
});
}
});
It 'controls' this view:
Ext.define('Customer_Portal_UI.view.NavigationMenu', {
extend: 'Ext.form.Panel',
alias: 'widget.navigationmenu',
region: 'west',
layout: 'fit',
ui: 'cssmenu',
loader: {
autoLoad: true,
url: '/resources/notloggedin.html'
}
});
But it also catches panel clicks from this view:
Ext.define("Customer_Portal_UI.view.MainContent", {
extend: 'Ext.form.Panel',
alias: 'widget.maincontent',
region: 'center',
layout: 'card',
border: false,
activeItem: 0,
requires: ['Ext.grid.Panel'],
initComponent: function () {
this.items = [
{
xtype: 'panel',
title: ''
},
{
xtype: 'gridpanel',
id: 'contactlistgrid',
store: Ext.data.StoreManager.lookup('contactStore'),
columns: [
....
],
features: [{
ftype: 'grouping',
groupHeaderTpl: ['{columnName}: {name} - ({rows.length} employees)'],
hideGroupedHeader: true,
startCollapsed: false
}],
viewConfig: { id: 'contactlistgridview' }
},
{
xtype: 'gridpanel',
id: 'caselistgrid',
store: Ext.data.StoreManager.lookup('caseStore'),
columns: [
{ text: 'Title', dataIndex: 'title' },
{ text: 'Description', dataIndex: 'description' },
{ text: 'Ticket number', dataIndex: 'ticketnumber' }
],
viewConfig: { id: 'caselistgridview' }
}
]
this.callParent(arguments);
}
});
Do you see any obvious reasons why it would do this ? panel is indeed the panel I'm clicking and not the document body, which could have explained why.
Note that's in not catching clicks from other panels, just from the MainContent view, which it should not...
Thanks.

The fix was two fold as shown in here:
http://www.fusioncube.net/index.php/sencha-extjs-4-make-any-component-fire-a-click-event/comment-page-1
Then I was able to listen to 'click' for 'panel' (there's only one panel within the view) within my controller without having to refine my selector.

controller doesn't work Sencha Touch

My controller doesn't seem to be working. Can someone tell me what's wrong?
Main.js this is my controller :
Ext.define('Catalog.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
homepanel: 'homepanel'
},
control: {
homepanel:{
itemtap: 'showApp'
}
},
showApp: function(){
console.log("OK");
}
}
});
Home.js this is my view:
Ext.define('Catalog.view.Home', {
extend: 'Ext.navigation.View',
xtype: 'homepanel',
config: {
title: 'All',
iconCls: 'list',
cls: 'home',
styleHtmlContent: true,
items:{
title: "All Apps",
xtype: 'list',
itemTpl: new Ext.XTemplate(
'<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
'<div style="margin-left: 60px;word-wrap: break-word;width:50%;">',
'<span style="font-size:16px;">{name}</span><br>',
'<tpl for="categories">',
'<span style="font-size:13px;color:#7C7C7C;">{name}</span>',
'</div>',
'</tpl>',
'<span></span>'
),
store: {
autoLoad: true,
fields: ['id','name','created_at','appicon_file_name','categories'],
sorters: 'created_at',
proxy: {
type: 'jsonp',
url: 'http://127.0.0.1:3000/appinfos.json',
reader:{
type: 'json',
rootProperty:'responseData.entries'
}
}
}
}
}
});
There are no errors in the console, but nothing is happening
Any help you could offer would be appreciated.

I think the problem is your showApp method is inside the config, should be:
Ext.define('Catalog.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
homepanel: 'homepanel'
},
control: {
homepanel:{
itemtap: 'showApp'
}
}
},
showApp: function(){
console.log("OK");
}
});

Adding views to the navigation view - BEGINNER

I have added a navigation view (called MainView), and a button. When i click on the button, the next view gets displayed (In the following example its called DASHBOARD). In the dashboard there's another button when i click on that another view should display. The name of that view is MOREDETAILS.
But, when i click on the button in the DASHBOARD view, MOREDETAILS view doesn't get added to the navigation view or even get displayed.
How can i resolve this ???
My Code :
MAINVIEW
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
config: {
fullscreen: true,
id: 'MainView',
ui: 'light',
modal: true,
useTitleForBackButtonText: true,
items: [
{
xtype: 'formpanel',
title: 'TEST',
layout: {
type: 'card'
},
items: [
{
xtype: 'button',
docked: 'bottom',
itemId: 'mybutton9',
ui: 'confirm',
iconAlign: 'right',
text: 'Click'
}
]
}
],
listeners: [
{
fn: 'onMybutton9Tap',
event: 'tap',
delegate: '#mybutton9'
}
]
},
onMybutton9Tap: function(button, e, eOpts) {
this.push(Ext.create('MyApp.view.Dashboard',{
title:'Dashboard'
}));
}
});
DASHBOARD
Ext.define('MyApp.view.Dashboard', {
extend: 'Ext.form.Panel',
config: {
id: 'DashboardID',
layout: {
animation: 'slide',
type: 'card'
},
modal: true,
scrollable: 'vertical',
items: [
{
xtype: 'list',
id: 'ListItem',
scrollable: true,
itemTpl: [
'<div> blah blah</div>'
],
store: 'MyJsonPStore',
items: [
{
xtype: 'button',
docked: 'top',
itemId: 'mybutton10',
text: 'MyButton10'
}
]
}
],
listeners: [
{
fn: 'onMybutton10Tap',
event: 'tap',
delegate: '#mybutton10'
}
]
},
onMybutton10Tap: function(button, e, eOpts) {
this.push(Ext.create('MyApp.view.MoreDetails',{
title:'Neeeeee'
}));
}
});
MOREDETAILS
Ext.define('MyApp.view.MoreDetails', {
extend: 'Ext.Panel',
config: {
id: 'MoreInfo',
layout: {
animation: 'slide',
type: 'card'
},
scrollable: 'vertical',
items: [
{
xtype: 'list',
itemTpl: [
'<div>jhhhjhjhjhjhjh</div>'
],
store: 'MyJsonPStore'
}
]
}
});

In onMybutton10Tap, you are calling push on this, which is a formpanel, not a navigationview. You need to get a reference to the parent before calling push.
First, give your first class an alias, which allows you to create it using xtype:
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
alias: 'widget.mainview'
//...more here
});
Then use up to get a reference to the parent using that xtype:
onMybutton10Tap: function(button, e, eOpts) {
this.up('mainview').push(Ext.create('MyApp.view.MoreDetails',{
title:'Neeeeee'
}));
}

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