I am trying to have the scroller open with a time value set conditionally. when the text input box is = 0 then set mobiscroll to value of 0. It appears that it defaults to 12 when input value is 0. I tried many approaches this is the closest I got...
$(function () {
$('.in').scroller({
preset: 'time',
theme: 'default',
display: 'modal',
mode: 'mixed',
stepMinute: 15,
timeWheels: 'hhii',
ampm: false,
ampmText: false,
timeFormat: 'hh:ii',
onShow: function (valueText, inst) {
scrollerVals = inst.temp;
if ($(this).val() == "0" || $(this).val == null || $(this).val == "") {
$(this).scroller().scroller('setValue', ['1', '0'])
}
}
});
but it doesn't work. Any suggestions would be appreciated.
First of all what would you like to achieve?
Second, mobiscroll is tied to an input, so it might not make sense to use the same for deciding on values.
For setting defaults use the 'setValue' method.
Related
I have a custom tooltip in react-chartjs-2;
I found a solution of making custom tooltip, but my tooltip is always visible, in that solution tooltip hides when tooltip.opacity is 0, but in my case tooltip opacity is always 1, can smbd help me pls?
tooltips: {
enabled: false,
mode: 'x',
intersect: false,
custom: (tooltipModel) => {
if (tooltipModel.opacity === 0) {
// never called because opacity is always 1
this.hide();
return;
}
// const position = this.chartRef.current.chartInstance.canvas.getBoundingClientRect();
// set position of tooltip
// const left = position.left + tooltipModel.caretX;
// const top = position.top + tooltipModel.caretY;
// set values for display of data in the tooltip
const date = tooltipModel.dataPoints[0].xLabel;
const value = tooltipModel.dataPoints[0].yLabel;
// this.setPositionAndData(top, left, date, value);
},
Just to clarify for any other person who needs help on this.
When you create your handle for a custom toolbar, you need to pay attention to not overwrite the this(scope) object. Try with arrow function and remove the bind, the fn will get automatically the new scope and the opacity will be update when you move out from a chart bar/line etc.
The same issue will happen with the legend if you try to overwrite the onClick function using inline arrow function or functions. Some examples bellow.
_tooltip = (tooltipModel) => {
...
}
_legendOnClick = (ev) => {
ev.preventDefault()
}
render() {
const defaultOpt = {
legend: {
onClick: this._legendOnClick
},
tooltips: {
enabled: false,
custom: this._tooltip,
mode: 'index'
}
}
}
If you want to improve perfomance, you should remove the defaultOpt from the render method.
That's
Instead of this:
intersect: false,
custom: (tooltipModel) => {
if (tooltipModel.opacity === 0) {
use this workaround:
intersect: false,
custom: function(tooltipModel){
let hit=this._active[0].inRange(this._eventPosition.x, this._eventPosition.y);
if (tooltipModel.opacity === 0 || !hit) {
make sure not to use arrow function to keep 'this'.
In my case the root of the problem was that I defined the 'options' object in the render function of my component along with the 'custom' tooltip handler and called a setState from the inside of it - which caused an other render call immediately. This broke down the tooltip handling of chart.js. Moving the handler outside of the render function solved it without needing the above workaround.
I have a checkbox whose value is bound to a field from database. I want to set a default value 'true'/'checked' if the database contains null value.
The checkbox is :
xtype: 'checkbox',
bind: { value: '{database_variable_name}'},
fieldLabel: 'label_name'
I have tried this formula with no effect (checkbox remains unchecked):
bind: { value: '{checkboxFormula}'}
and
checkboxFormula: {
get: function (get) {
var value = get('database_variable_name');
return (value == null) ? true : value;
},
set: function (value) {
this.set('database_variable_name', value);
}
}
The whole function works correctly if database does not return null, the checkbox is checked/unchecked accordingly. Any pointers to where I might be going wrong would be highly appreciated!
PS : Binding database variables is already in working condition.
After Configuring the TinyMce Editor and some Functions I want now to Warn the User if he did changes but did not save them.
For that Iam Checking the Dirty Flag at Blur. But its always set false .
controller.js
this.$scope.tinymceOptions = {
selector: 'textarea',
menubar: false,
plugins: 'save',
save_enablewhendirty: true,
save_onsavecallback: (editor) => {
doing here my save stuff
},
setup: function(editor) {
editor.on('dirty', () => {
console.log('dirty woop')//if i do edits its triggered
})
editor.on('blur', function(e) {
console.log(tinyMCE.activeEditor.isDirty());//its triggered but after edits it says dirty=false
//wanna do here some warning output as info
});
editor.on('change', function(e) {
editor.setDirty(true);//seting dirty true if changes appear
console.log(tinyMCE.activeEditor.isDirty());//dirty output = true
});
},
height: 100,
width: 250,
toolbar1: ' undo redo | bold underline italic',
toolbar2: 'save'
};
Why is it always set to false if I leave the Editor after changes?
Using TinyMce 4.4.x
Angular 1.5.x
Angular-ui-TinyMce 0.0.17
Edit
It seems it is somehow reseting the Flag somewhere in a Cycle Loop?
If I write something and wait more than ~1sec it is set always to false. If I write something and immediately move out the dirtyFlag is set true.
How can I set the Flag Dirty by writing something and say wait till its saved be always Dirty ?
I have a numberfield input which I want to lose focus when the user hits the enter key.
Here's the current config:
{
xtype: 'numberfield',
minValue: 0,
maxValue: 99999,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false,
enableKeyEvents: true,
listeners: {
specialkey: function(f, e) {
if (e.getKey() == e.ENTER)
f.blur();
}
}
}
The specialkey handler works, calling blur() as expected, but the only result is that the caret disappears from the input (indicating that the DOM text input element has been blurred). The field still has all the x-form-focus etc css classes, and examining the object shows that the private hasFocus property is still true.
Any suggestions?
I have tried calling f.onBlur() explicitly after the blur() call, but it made no difference.
(btw the field does not belong to a form so there is no form to submit.)
The fix. The issue is caused by a weird behavior in the Ext.form.field.Trigger class where they don't trigger 'triggerBlur()' when the regular 'blur()' function is called. Very interesting:
listeners: {
specialkey: function(f, e) {
if (e.getKey() == e.ENTER)
{
f.triggerBlur();
f.blur();
}
}
}
This works for me :
specialkey: function(field,events) {
if (events.getKey() == events.ENTER) {
var nextfld = field.nextSibling();
nextfld.focus(true,100);
}
}
specialkey - is a listener of component like textfield,textare,datefield etc,
events.getKey - gets the user keyboard input
events.ENTER - i used this for that will be triggered when "ENTER" in keyboard
field.nextSibling - field refers to current component, and nextSibling property of component to tell who will be the next component
lastly is the nextfld.focus to focus the next component
I have a working sort-able grid using the ext 3.4 grid filter plugin. I would like to default the active column to filter true values. User who needs the inactive records could remove the filter. How do I specify a default filter column and value?
Thanks in advance!
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable: true
// How do I specify a default filter value
//
// Only show active records unless the user changes the filter...
},
columns: [{
dataIndex:'f_uid',
id:'f_uid',
header:'ID',
hidden:true
}, {
dataIndex:'f_name',
id:'f_name',
header:'Name',
}, {
xtype:'booleancolumn',
dataIndex:'f_active',
id:'f_active',
header:'Active',
filterable:true,
trueText:'Active',
falseText:'Inactive'
}]
I realise this is an old question but it took me a while to find a solution, therefore I thought I would share.
1) The filter can be set using the value property in the filter.
filter: {
type: 'LIST',
value: ['VALUE TO FILTER']
}
2) In order to initially filter the data use the filterBy() method in the store. This could be defined in the onRender event handler.
this.getStore().load({
scope:this,
callback: function() {
// filter the store
this.getStore().filterBy(function(record, id) {
// true will display the record, false will not
return record.data.DATA_TO_FILTER == 'VALUE TO FILTER ';
});
}
});
The answer was in the Filter.js source code. The filter object within the column definition can be used to configure the default behavior.
}, {
xtype:'booleancolumn',
dataIndex:'f_active',
id:'f_active',
header:'Active',
trueText:'Active',
falseText:'Inactive',
filterable:true,
filter: {
value:1, // 0 is false, 1 is true
active:true // turn on the filter
}
}
I have encountered the same problem and I found that #John's answer is right, I can make it work with the sample http://dev.sencha.com/deploy/ext-4.0.0/examples/grid-filtering/grid-filter-local.html, for the grid-filter-local.js, just add the code like:
grid.getStore().load({
scope:this,
callback: function() {
// filter the store
grid.getStore().filterBy(function(record, id) {
// true will display the record, false will not
return record.data.size === 'small';
});
}
});
before the original code store.load(), and wipe off the store.load().
Then it will only show the record with size equals 'small' at the first load of the web page. Cheers!
I've made a universal helper class that allows you to set any default values in column definition.
https://gist.github.com/Eccenux/ea7332159d5c54823ad7
This should work with both remote and static stores. Note that this also works with filterbar plugin.
So your column item is something like:
{
header: 'Filename',
dataIndex: 'fileName',
filter: {
type: 'string',
// filename that starts with current year
value: Ext.Date.format(new Date(), 'Y'),
active:true
}
},
And then in your window component you just add something like:
initComponent: function() {
this.callParent();
// apply default filters from grid to store
var grid = this.down('grid');
var defaultFilters = Ext.create('Ext.ux.grid.DefaultFilters');
defaultFilters.apply(grid);
},