controller doesn't work Sencha Touch - javascript

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

TreePanel: Store is not loading

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...

Dataview sample in MVC architecture isn't working

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

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.

How do I keep the images when changing tabbar position?

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 {}

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

Categories