Develop Reference

JSGrid - Change cell value after page is changed (onPageChanged method) not working

I'm using JS-Grid and I want to update a specific cell value right after i change a page.
Looking at the documentation , onPageChanged method seems like the right way to do it, but it doesn't work properly.
I have the following JS-Grid code:
$("#itemsListGrid").jsGrid({
width: "100%",
filtering: true,
sorting: !0,
viewsortcols : [true,'vertical',true],
paging: true,
autoload: true,
pageSize: 9,
pageButtonCount: 5,
controller: db,
fields: jsGrid_fields_mapping,
onPageChanged: function() {
alert("START onPageChanged");
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}
});
Running my app, i see that the alerts are popping BEFORE the page actually change. I'm trying to find a workaround to make it work.

Maybe not the most clean way to do it, but have you tried using setTimeout()?
So, in your case:
onPageChanged: function(args) {
alert("START onPageChanged");
// Wait some time to render table, then call function
setTimeout(function() {
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}, 300);
},
Background: the docs of JSGrid say that the event fires immediately after the page index is changed and doesn't wait for the data to load.

Why can't I get destroy() call for skrollr to work?

Hello I am trying to use skrollr on a responsive site, and I just want to turn it off for mobile and then back on for table / desktop. I keep getting this error:
Uncaught TypeError: Object # has no method 'destroy'. A point in the right direction would be helpful as I wasn't able to find an example that is using the destroy call for skrollr.
Below is the code that I am using:
var s = skrollr.init(
{
forceHeight: false,
constants:
{
box: '50p'
}
});
// set breakpoints
$(window).setBreakpoints(
{
// use only largest available vs use all available
distinct: true,
// array of widths in pixels where breakpoints
breakpoints:
[
480,
768
]
});
$(window).bind('enterBreakpoint480',function()
{
console.log("this is now 480");
s.destroy();
});
$(window).bind('enterBreakpoint768',function()
{
console.log("this is now 768");
s = skrollr.get();
});

Check if element is not in an array to open a window

what I am doing here is some kind of a chat interface with your online and offline contacts which you can drag around the window. I m stuck trying to create a function to check if you already opened a chat window to avoid duplicated windows. This is the link of what i got so far. s2.enigmind.com/jgonzalez/nodeChat I hope you guys can see it.
This is the function in which I append the window elements this function get some parameters that i obtain from a JSON, the parameters are user id name and status.
function displayChatWindow(user, status, avatar, id){
var template = _.template($("#windowTemplate").html(), {userName: user, userStatus: status, userAvatar: avatar, userId: id});
stackingWidth = stackingWidth - boxWidth;
/*console.log(stackingWidth);*/
$("body").prepend(template);
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
$("#" + id).css({
top: absoluteY,
left: stackingWidth
});
$("#" + id).find(".minimize").on("click", displayOthersChat);
$(".chat input, .chat textarea").on("focus", cleanInputs);
$(".chat input, .chat textarea").on("blur", setInputs);
addWindow(id, stackingWidth);
}
what I have in my global scope is an array called var openedWindows = []; and in this array I am appending the user id and position with the addWindow function.
function addWindow(id, offset){
openedWindows.push({
id: id,
offset: offset
})
}
So far, every time i open a new window this one is added to the array, I've been using a for loop to see if the user and id is already in the array, but i don't actually know how to structure my code, because there is no way to check at the first time if the user is in the array because the array is empty, I will appreciate if you guys know how i could achieve this, I know my code is not the best, all this is for my learning purposes so i accept all kind of tips! Thank you very much.

you are already using underscore.js , so why not use its _.each() function to loop over all entries in openedWindows:
function addWindow(id, offset) {
var found = false;
_.each(openedWindows, function(el, idx) {
// 'el' is an item in openedWindows, and 'idx' is its position in the array
if (el.id === id) {
found = true;
}
});
if (found === false) {
openedWindows.push({
id: id,
offset: offset
});
}
}

Add tip text dynamically to a slider

In my project, I am trying to add the tip text (config) dynamically to a slider. How to do that?
I need to add it dynamically because I am generating the array of variables in a "Controller", which holds the text for each value of the slider (for tip text).
var slider = Ext.getCmp('slider')
slider.setTipText(arrayOfVariables) //What should I do here instead?
There is no such method like setTipText in docs. What should I use then?
EDIT:
{
xtype:'slider',
animate: false,
//plugins: [Ext.create('App.view.SliderOverride')],
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 36/2, //must be current month
//increment: 10,
minValue: 1,
maxValue: 36,
useTips: true,
tipText: function(thumb){
alert("hello");
App.getController('TaskController')._arrMonthView[thumb.value].month;
},
},

tipText requires a function config so you can add a function that will use your variables from controller;
Ext.create('Ext.slider.Multi', {
....
tipText: function(){
return App.getController('your controller').yourVariable
},
.....
});
This is added on the creation of the slider so you don't need to modify it , just your variables in controller. So you don't need to re set the tip text function.

I solved this issue by using getText method of Ext.slider.Tip.
Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider Thumb that the Tip is attached to. Override to customize.
For example in which situation it can be used, you have a look at this link

How do I morph a class with Scripty 2?

In Scriptaculous 1, you could animate styles:
new Effect.Morph('id', {
style: { background: tomato },
duration: '4' });
But a better way was to keep the CSS and JS separate and merely reference a class:
new Effect.Morph('id', {
style: 'important',
duration: '4' });
Marvellous. But this doesn't seem to work with the new Scripty 2. Works:
$('id').morph('background: tomato', { duration: 4 });
Breaks:
$('id').morph('important', { duration: 4 });
What is the right way to animate using a class in Scripty 2? (I suspected Style, but the docs were vague.)

I checked out the source code and s2 only takes 'styleProp:value' for the style option. The string needs to have a colon.
The only method that will additionally take the class name as well 'styleProp:value' for the style option is a method called S2.FX.Operators.WebkitCssTransition. However, the S2.Extensions.webkitCSSTransitions are turned off by default. Although, the code in that method to be used to make your own patch to the .Morph method.