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");
}
});
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 referred to the ExtJS 5.01 dataview sample and modified it in MVC architecture.
But there is a problem the browser show error message "Uncaught TypeError: Cannot read property 'on' of null".
What's wrong about my code?
Fiddle
Viewport:
Ext.define('Fiddle.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
requires: [
'Fiddle.view.IconView'
],
items: [{
region: 'center',
xtype: 'iconview',
}]
});
Store:
Ext.define('Fiddle.store.IconView', {
extend: 'Ext.data.Store',
model: 'Fiddle.model.IconView',
data: [
{ src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
{ src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
{ src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
{ src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
]
});
Model:
Ext.define('Fiddle.model.IconView', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
});
View:
Ext.define('Fiddle.view.IconView', {
extend: 'Ext.view.View',
alias: 'widget.iconview',
initComponent: function() {
var me = this;
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
Ext.apply(me, {
store: 'IconView',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
tpl: imageTpl
});
me.callParent(arguments);
}
});
In your Ext.application (app.js) add:
stores: ['IconView']
Working example based on your code: https://fiddle.sencha.com/#fiddle/vc2
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.
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 {}
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();
}