I am trying to add a custom spinner logic to a spinner field I have. I have been able to customize the spinner in the "view" by using onSpinUp:.
I am looking to refer to the spin up step in the controller but I am not having success. I am unable to reach the debugger I have in the "spinner" function.
This is what I have so far, I am not sure what I am missing. Could someone shed light on this?
Thanks in advance.
`control:{
currentTime:{ //currenTime is the itemId
spinup: 'spinner' // spinner is the function name
},
}`
`
spinner: function (){
debugger;
}
`
I see that you have added single quotes, and I'm not sure if you code looks exactly like this, but your control object should look like:
//currenTime is the item id so it has to be wrapped
// with single quotes and it also needs a # prefix.
control:{
'container #currentTime': {
spinup: 'spinner' // spinner is the function name
}
Check fiddle: https://fiddle.sencha.com/#fiddle/uo1
Note: You need to add container #currentTime, just #currentTime won't work. It's a known issue with Sencha Touch.
Related
i'm having some troubles solving this.
I need to keep navigator series always visible.
The problem is when i click in one legend item, the serie linked to this legend dissappears. Thats fine.
But the serie in the navigator dissappears to, and i don't want this.
I tried with the "adaptToUpdatedData" parameter, not working.
I tried handling the events in "legendItemClick" and hide show the series manually, but this hides the navigator series also.
Please help! I tried almost everything.
The only i managed to achieve it is keeping all the series with the parameter "showInNavigator" false, and then add the series in navigator.series.
But i think is not a good solution.
Thanks.
I add hide events to series with showInNavigator: true. These call a function which does:
var chart = this.$refs.highcharts.chart
for (var series of chart.navigator.series) {
series.setVisible(true, false)
}
chart.redraw()
You can use Highcharts removeEvent method to remove the connection when changing visibility between the chart series and the navigator series:
chart: {
events: {
load() {
this.series.forEach(function(s) {
if (!s.baseSeries) {
H.removeEvent(s, 'show');
H.removeEvent(s, 'hide');
}
});
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/69rwjsce/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.removeEvent%3CT%3E
I think it is a common sense that providing a simple way to hide/show and enable/disable a button, but I cannot find any document that describe dojo has done such thing.
Any way, I hope it is my fault that I have missed out something while googling, thanks!
The following coding is what I have tried but they just make the button's text invisible:
dojo.style(btnInsert, {'visibility':'hidden'});
dojo.style(btnInsert, {'display':'none'});
UPDATE Question:
To oborden2:
I have tried your code, the result is same as the above code, here is the captured screen:
To MiBrock:
I have also tried your code and also get the result that same as the above code:
Form widgets in Dijit are special. For all normal Dijit widgets, the domNode (outermost node) of the widget receives the id property. However, with form widgets, the focusNode (which corresponds to the <input> element) receives the ID instead, so that things like <label for="foo"> work properly. In this case, the outermost node has no ID, and you’re actually just hiding the inner HTML input element.
If you already have reference to the widget:
require([ 'dojo/dom-style' ], function (domStyle) {
domStyle.set(widget.domNode, 'display', 'none');
});
If you only have a reference to the ID of the widget/original DOM node:
require([ 'dojo/dom-style', 'dijit/registry' ], function (domStyle, registry) {
domStyle.set(registry.byId(nodeId).domNode, 'display', 'none');
});
Try
require(["dojo/dom-style","dojo/domReady!"], function(domStyle){
domStyle.set(dojo.byId(domNode),'display','none');
});
The variable "domNode" stays for the id of the Node that should be influenced. This is the way we make it.
Regards, Miriam
Try using the Toggler module
require(["dojo/fx/Toggler"], function(Toggler),{
// Create a new Toggler with default options
var toggler = new Toggler({
node: "btnInsert"
});
// Hide the node
toggler.hide();
// Show the node
toggler.show();
});
http://dojotoolkit.org/reference-guide/1.9/dojo/fx/Toggler.html
I imagine you would want to link this to some event using Dojo's on module. Link it up to whatever condition triggers the button's need to be hidden.
In my app I am using tpl but its not working: can any one tell me what to do and where I am wrong?
Inside config :
{
id: 'content',
tpl: "<div class='attorney-details'>hi:{details}</div>"
},
and my Update method is :
update: function(newRecord) {
if (newRecord) {
currentView=this.getRecord().data;
this.down('#content').setData(newRecord.data);
}
}
At output not even "Hi" is printed.
Also, if an alert is added in the update method it is not executed.
Thanks.
The first step would be to make sure your update method would be executed. Not really enough info to figure out what is going on with your code. It looks like your update method is located inside your view with your reference to this.down, so you need to make sure the component you are using has access to a store. If you don't you can just pass an object to update the template like this http://new.senchafiddle.com/#/7mAmV/.
I am rather new to sencha touch, I've done a lot of research and tutorials to learn the basics but now that I am experimenting I have run into a problem that I can't figure out.
I have a basic DataList which gets its data from a store which displays in a xtemplate.
Within this template I have created a member function which requires store field data to be parsed as a parameter.
I would like to make a thumbnail image (that's source is pulled from the store) execute the member function on click/tap.
I can't find any information on this within the docs, does anyone know the best way to go about this?
Here is a code example (pulled from docs as I can't access my actual code right now).
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>'
{
tapFunction: function(name){
alert(name);
}
}
);
tpl.overwrite(panel.body, data);
I want to make the paragraph clickable which will then execute the tapFunction() member function and pass the {name} variable.
Doing something like onclick="{[this.tapFunction(values.name)]} " does not seem to work.
I think functions in template are executed as soon as the view is rendered so I don't think this is the proper solution.
What I would do in your case is :
Add a unique class to your < p > tag
tpl : '<p class="my-p-tag">{name}</p>'
Detect the itemtap event on the list
In your dataview controller, you add an tap event listener on your list.
refs: {
myList: 'WHATEVER_REFERENCE_MATCHES_YOUR_LIST'
},
control: {
myList: {
itemtap: 'listItemTap'
}
}
Check if the target of the tap is the < p > tag
To do so, implement your listItemTap function like so :
listItemTap: function(list,index,target,record,e){
var node = e.target;
if (node.className && node.className.indexOf('my-p-tag') > -1) {
console.log(record.get('name'));
}
}
Hope this helps
I am trying to do something like : when user click on the button, the child panel will show/hide
the issue is the 'onbtnClick' function is working just once. when i click on the button the panel shows and then when i click it again nothing happens and no errors tho ! the panel should hide
By the looks of it, there isn't really much need to pass a boolean param to the function.
If you purely want a 'toggle' function, based on the panels visibility and you have a reference to the Ext component, you can use the isVisible() function:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-isVisible
So your onBtnClick function would look something like this:
onbtnClick: function (){
var childPanel = Ext.getCmp('p');
if(childPanel.isVisible()) {
childPanel.hide();
}
else {
childPanel.show();
}
}
onbtnClick: function (){
var childPanel = Ext.getCmp('p');
if (!childPanel.isHidden()) {
childPanel.hide();
} else {
childPanel.show();
}
}
Instead isVisible() use method isHidden() because method isVisible may return false when the panel is covered by other components or is not rendered yet (even when your panel has not got hidden property (hidden = false)).
panel.getEl().toggle();
will serve your purpose.
-YP
you have setVisible, taking a boolean parameter to know what to do.
childPanel.setVisible( ! childPanel.isVisible() )
This example will actually toggle the visibility at each execution.