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();
}
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...
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}'
}
}
},
}
});
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.
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");
}
});
Hi I would like to know how to keep the icnClass when I set the tab to the left as so:
Ext.define("GS.view.Main", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
config: {
tabBarPosition:'left',
scrollable: true,
styleHtmlContent: false,
items: [
{
xtype: 'panelhome'
},
{
xtype: 'contactform'
},
{
xtype: 'blog'
}
]
}
});
Ext.define("GS.view.Blog",{
extend: 'Ext.navigation.View',
xtype:'blog',
config:{
title:'Blog',
iconCls:'bolt',
items:{
xtype:'list',
itemTpl: '{title}',
title: 'Recent Posts',
store:{
autoLoad:true,
fields: ['title','author', 'content'],
proxy:{
type:'jsonp',
url:'...',
reader: {
type:'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
}
});
Thank you very much.
Got it fixed via sass. Look into the following elements
.x-tabbar-dark.x-docked-left .x-tab-active .x-button-icon {}
.x-tabbar-dark.x-docked-left .x-tab .x-button-icon {}
.x-tabbar-dark.x-docked-left .x-tab-active {}
.x-tabbar.x-docked-left .x-tab .x-button-icon {}
.x-tabbar.x-docked-left .x-tab{}
.x-tabbar-dark.x-docked-left .x-tab-active .x-button-icon {}
.x-tab .x-button-icon.home, .x-button .x-button-icon.x-icon-mask.home {}