I would like to know how to add itemmouseup listener of an chart's series into controller?
My controller's init method is as follows :
init: function() {
this.control({
'candidateDistribution > treepanel' : {
itemclick: this.treeStoreItemClickHandler
},
'#candidateDistributionButton' : {
click: this.candidateDistributionButton_ClickHandler
},
'competitorAnalysis #slaWiseEmprDistriGrid series': {
itemmouseup: this.sLA_ItemMouseUpEventHandler
}
});
},
In this case, itemmouseup event handler of organizationAnalysis #sLAWiseEmprDistriGrid series is not working but event handlers for rest of the things are working fine.
I tried to change Component Query to competitorAnalysis > #slaWiseEmprDistriGrid series or to competitorAnalysis > #slaWiseEmprDistriGrid[series] but its not working.
I had to add this itemmouseup event handler into code of chart's series which is working just fine but I think its breaking MVC pattern.
Code for my chart is as follows :
xtype: 'chart',
itemId: 'slaWiseEmprDistriGrid',
store: 'SLAWiseCompetitorDistribution',
flex: 2,
animate: true,
legend: {
position: 'right'
},
insetPadding: 25,
series: [{
type: 'pie',
field: 'empCount',
showInLegend: true,
listeners: {
'itemmouseup': function(item) {
var record = item.storeItem;
var slaWiseEmpListStore = Ext.data.StoreManager.lookup('SLAEmployerList');
slaWiseEmpListStore.proxy.extraParams['paramFirstDimensionValue']= record.get('name');
serviceLineWiseEmpListStore.load();
}
}
}] // end of series configuration
So I would like to know why this itemmouseup event handler is not working in controller?
Also in future I want to convert this app into web desktop like application, but I am not able to find information/documentation/tutorial on extjs documentation site. Where can I get tutorial/documentation about developing web desktop application?
Thanks in Advance !
You could setup this event in controller in 2 steps.
Add listener to your chart render event
In this listener setup your series events.
Regarding desktop application - I only can suggest looking into this example: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/desktop/desktop.html
Related
I want to add an additional text property to sap.ui.unified.MenuItem. It currently has only one text property.
I am trying the following
sap.ui.unified.MenuItem.extend("ExtendedMenuItem",{
metadata:{
properties:{
SetText : {type: "string"}
},
aggregations: {
_SecondText : {type: "sap.ui.commons.Label", multiple : false, visibility: "public"}
}
},
init: function(){
var oSecondText = new sap.ui.commons.Label("TL",{
text: this.SetText
});
this.addAggregation("_SecondText",oSecondText);
},
renderer:"sap.ui.unified.MenuItemRenderer"
});
var oTestCopy = new ExtendedMenuItem("TC",{
text: "TEST COPY",
SetText: "CTRL+TEST"
});
but the second text property is not being displayed.
What can i do to add a second text property to a standard UI5 control ?
Here is an example from the official documentation of Custom Controllers. You have to implement the renderer itself to place the new m.Label element on the UI. In the renderer, you can operate with standard HTML elements. For more details, check the linked source.
In wavemaker a got an app that display charts with dojo charting, some charts have a lot
data so the chart is compressed so i look around and found that we could add zooming and panning, found an example on the web link:http://informatik.fh-brandenburg.de/~porebskk/dojo.html
i look at the source code and it looks like i only had to add this to my code
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
and then call it before rendering the chart
new dojox.charting.action2d.MouseZoomAndPan(chart, "default");
My problem is when i had this to my source code
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
and run the app i get "page Main as error" and my application does not work anymore
if i do this then my application comesback to life
//dojo.require("dojox.charting.action2d.MouseZoomAndPan");
i create a new application and i only had this on top of the main page and get
the error again
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
in the wavemaker debugger i get "error parsing pages/Main/Main.js"
I am using AMD style but this may help you. I was able to find the missing piece with your link.
Dojo toolkit had some slightly incorrect code here (MouseZoomAndPan section), but it will give you the code I have below and is why I have commented out code after MouseZoomAndPan(...);
define(["dojox/charting/themes/Claro", "dojox/charting/Chart", "dojox/charting/axis2d/Default"
, "dojox/charting/plot2d/Lines", "dojox/charting/action2d/MouseZoomAndPan"],
function (claro, Chart, Default, Lines, MouseZoomAndPan) {
return {
createZoomableChart: function () {
"use strict";
var chart = new Chart("mouseZoom");
chart.addAxis("x", { type: Default, enableCache: true })
.addAxis("y", { vertical: true })
.addPlot("default", { type: Lines, enableCache: true })
.addSeries("Series A", [1, 2, 2, 3, 4, 8, 6, 7, 5]);
var mzap = new MouseZoomAndPan(chart, "default");//, { axis: "x", "none" });
chart.render();
},
init: function() {
this.createZoomableChart();
}
};
});
I have a strange problem with all my selectfields. When I enter a view for the first time containing a selectfield with a change event listener defined in the controller, it works fine. I can do a select and the event will fire. But when I enter an other view and pop that view so I return in the view with the selectfield, the change event does not fire anymore. Also the selected value is gone. I've tried to add the listeners to the config in the view, but that is not working at all?
This is more ore less an example of what I'm doing.
Controller:
Ext.define('MyApp.controller.Search', {
extend: 'Ext.app.Controller',
config: {
refs:{
distanceSelect:'#distanceSelect',
},
control:{
distanceSelect:{
change:'filterSearchList',
},
}
},
filterSearchList:function(){
alert('42!!');
}
});
View:
Ext.define('Abedrijven.view.search.Search_main', {
extend:'Abedrijven.view.Screen',
alias:'widget.search_main',
requires:[
'Ext.field.Select',
],
config:{
items:[{
xtype: 'selectfield',
id: 'distanceSelect',
name:'distance',
options: [{
text: '- All -',
value: '0'
}, {
text: '5 Km.',
value: '5'
}, {
text: '10 Km.',
value: '10'
}
}]
}
});
EDIT
I have this in my app.js. I call these when I want to change the views.
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
var view = Ext.create('Abedrijven.view.Main');
Ext.Viewport.add(view);
Abedrijven.app.view = view;
Abedrijven.app.pushView = function(xtype,data){
Abedrijven.app.view.push({xtype:xtype,data:data});
}
Abedrijven.app.popView = function(){
Abedrijven.app.view.pop();
},
Abedrijven.app.goHome = function(){
Abedrijven.app.view.reset();
}
Abedrijven.app.view.add({xtype:'home_main'});
},
My main view:
Ext.define("Abedrijven.view.Main", {
extend:'Ext.NavigationView',
requires:[
'Ext.Toolbar',
'Ext.tab.Panel',
'Ext.TitleBar',
],
alias:'widget.main',
id:'mainview',
config:{
cls:['mainview'],
fullscreen: true,
ui:'dark',
items:[
The first time it all works, change to other view, and than change back to this view and the change event will not fire. I'm using ST 2.0.1.1 GPL. Tested on iOS and browser.
Any help would be great!
Thanks in advance!
I had the same problem because I was using views defined and instantiated at runtime. First time was fine, second one the controller was loosing the listeners.
I solved the problem simply using dom subqueries.
config: {
refs: {
RecordTypeSelectField : 'NewRecordPanel #recordTypeSelectField'
Essentially you simply add the parent container to the query key. That's all!
I've found the bug. I was using id's, but itemId is better. Here the answer that helped me figuring this out.
id:'myid'
replaced to
itemId:'myid'
Needed to change some code to get the right elements again, but now it works
When moving between panels I get the following error
[WARN][Ext.Component#constructor] Registering a component with a id (`logOutButton`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.
I can go back to the previous screen but the cannot go forward again without getting the above error.
To combat this I have tried using the code below, but it does not work. Can anyone help me out?
var loginView = Ext.getCmp('login');
if(!loginView){
Ext.getCmp('loginTest2').destroy();
loginView = Ext.create('com.view.Login');
}
Ext.Viewport.setActiveItem('login');
I also tried:
if(Ext.getCmp('login')){
Ext.Viewport.setActiveItem('Login');
}else{
Ext.Viewport.setActiveItem(Ext.create('com.view.Login'));
}
Neither of these work and result in the same error and a blank screen. I am using Sencha Touch 2.
we can simply use following line to navigate from one panel to another..
Ext.Viewport.animateActiveItem({ xtype: "cat" }, { type: "slide", direction: "up" });
here, xtype is that we can define for the panel we want to display, like this...,
Ext.define('BeLocal.view.LeftCurveList', {
extend: 'Ext.Panel',
**xtype: 'cat',**
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
width: '100%',
padding:0,
title: 'BeLocal Places',
items:[{
xtype: 'button',
ui: 'back',
text: 'Back',
]
},
]
}
});
To avoid this error do not use id for button or any other item instead of id use action config for button or use item id .to destroy a component using itemId simply use this`
Ext.ComponentQuery.query('list[action=diaryselectlist]')[0].destroy();
above it just destroying a list to whom i gave action not id you can give itemId instead of action in this ..
hope you will enjoy this
I would like to switch views with a button, there is absolutely no examples of it in a MVC context in the sencha documentation although they recommend developers to use their build in MVC architecture. I guess its because Touch 2.0 is rather new.
http://docs.sencha.com/touch/2-0/#!/api
The video about the list component is also about navigation.View, but since the list component is used, they dont show how to switch views with a button.
Video: Intro to List Component
This is the code i have so far:
uddannelser.js (First view)
Ext.define("VUCFyn.view.uddannelser", {
extend: "Ext.navigation.View",
xtype: "uddannelser",
requires: [
"VUCFyn.view.avu"
],
config: {
title: "Uddannelser",
cls: "uddannelser",
items: [
{
title: "Uddannelser",
xtype: "container",
margin: 20,
layout: "vbox",
items: [
{
xtype: "button",
text: "AVU",
width: 100
}
]
}
]
}});
avu.js (subview of uddannelser)
Ext.define("VUCFyn.view.avu", {
extend: "Ext.Panel",
xtype: "avu",
config: {
title: "AVU",
cls: "avu",
scrollable: true,
items: [
{
xtype: "label",
html: [
"<p>Almen Voksenuddannelse - avu - er et tilbud om uddannelse til alle over 18 år. Du kan tage avu-fagene et ad gangen eller i en kombination med flere fag. Du kan også kombinere avu-fagene med andre enkeltfag på FVU og/eller hf.</p>",
"<h5>AVU omfatter kernefagene:</h5>",
].join("")
}
]
}});
Main.js (controller)
Ext.define('VUCFyn.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
uddannelser: "uddannelser"
},
control: {
"uddannelser": {
tap: "showDetail"
}
}
},
showDetail: function () {
this.getUddannelser().push({
xtype: "avu"
});
},
init: function () {
}});
Please, if someone could show me how to do it, based on the above code (or similar) that would be great.
btw: the answers in this thread: Sencha Touch 2 MVC - how to switch views with button is not working for me. (No errors though) I think its for Sencha Touch 1.1, and a lot of things have apparently changed in 2.0
Hi I think you just need to fix the controller and it will work, try the following and let me know how you get on.
config: {
refs: {
uddannelser: "uddannelser",
uddannelserButton: "uddanelser button"
},
control: {
"uddannelserButton": {
tap: "showDetail"
}
}
},
So all I have done is add a selector for the button in your uddanelser view and attached the click listener to that. Good luck!
Are you trying to listen for tap events on the navigationview you've given the uddannelser cls? There's a couple of issues with your setup;
Firstly, it doesn't look like you are using component queries properly in your controller, check this documentation: http://docs.sencha.com/touch/2.4/apidocs/#!/api/Ext.ComponentQuery
Depending on how many of these components in the view you want the controller to manage, you can either give it an id and search for the component by "#id" or you can use the xtype and a config option, such as "navigationview[cls=uddannelser]".
Secondly, you can't listen for tap events on a navigationview, if you wanted to listen for tap events on this component you'd have to listen for the tap event on the element and relay the event. I suspect you are actually trying to listen for the tap event on the button though, in that case create two refs in your controller, one for the navigationview and one for the button, listen for the tap event on the button and push the panel on the navigationview like you are now.