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}'
}
}
},
}
});
Related
It's my first time working with ExtJS 6, and i'm having some problems with a TreePanel... Here are my scripts:
TipoCausasTree.js
Ext.define('Incidencias.view.main.TipoCausasTree',
{
extend: 'Ext.tree.Panel',
xtype: 'tipoCausasTree',
alias: 'tipoCausasTree',
reference: 'tipo-causas-tree',
requires: [
'Incidencias.view.main.TipoCausasController',
'Incidencias.store.TipoCausasTreeStore',
'Ext.data.*',
'Ext.grid.*',
'Ext.tip.*',
'Ext.tree.*'
],
store: {
type: 'TipoCausasTreeStore'
},
controller: 'tipoCausas',
id: 'treepanelCausa',
displayField: 'text',
loadMask: true,
collapsed: false,
animate: false,
renderTo: Ext.getBody(),
root: {
nodeType: 'async',
text: "Tipos De Causas",
id: 'root',
expanded: true
},
listeners: {
contextmenu: 'onCtxMenu'
}
});
TipoCausasTreeStore.js
Ext.define('Incidencias.store.TipoCausasTreeStore', {
extend: 'Ext.data.TreeStore',
alias: 'store.TipoCausasTreeStore',
requires: [
'Incidencias.model.TipoCausasModel'
],
model: 'Incidencias.model.TipoCausasModel',
autoLoad: true,
lazyFill: true,
proxy: {
type: 'ajax',
url: context + 'listadoCausasTipoAdminTree.action',
reader: {
type: 'json',
root: function(o) {
return o.data || o.children
}
}
},
});
And TipoCausasModel.js
Ext.define('Incidencias.model.TipoCausasModel', {
extend: 'Ext.data.Model',
fields : [
{name:'id', type:'string'},
{name:'text', type:'string'},
{name:'iconCls', type:'string'},
{name:'cls', type:'string'}
]
});
I can see the tree root in my panel, but my store is not loading... If I check network, nobody is calling to listadoCausasTipoAdminTree action...
Can you help me? Thanks
P.S. Srry for my english...
Update: When I execute
Ext.getCmp('treepanelCausa').store.proxy.type
I get "memory" in console, and
Ext.getCmp('treepanelCausa').store.proxy.url
Is undefined...
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.
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.
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'
}));
}
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();
}