I'm trying to bind two sliders from two separate qooxdoo classes and am looking for an example. I was able to get the desired effect in the playground here:
http://tinyurl.com/7hlbwu6
// create two sliders
var slider1 = new qx.ui.form.Slider().set({minWidth:400});
var slider2 = new qx.ui.form.Slider().set({minWidth:400});
// create a controller and use the first slider as a model
var controller = new qx.data.controller.Object(slider1);
var controller2 = new qx.data.controller.Object(slider2);
// add the second slider as a target
controller.addTarget(slider2, "value", "value");
controller2.addTarget(slider1, "value", "value");
I'm pretty sure to do this I would have to go through the properties object, but first wanted to make sure that I'm on the right track so far with the logic. Thanks for any suggestions!
You don't need to use the controller. Every qooxdoo objects has the bind method, which can be used in both directions:
slider1.bind("value", slider2, "value");
slider2.bind("value", slider1, "value");
Thats basically it: http://tinyurl.com/7xy9mmv
Related
I like the gijgo treeview with checkbox as its clean and neat and it solves the purpose of showing the hierarchy information. Check below link for documentation.
https://gijgo.com/tree/demos/bootstrap-treeview-checkbox
Since knockout.js is preferred for the front end development hence its needed to develop a knockout binding for this particular requirement.
The idea is to populate the hierarchy data from the backend and bind it to the custom knockout binding.
The user selects/un-selects some checkboxes and then hits the save button. the selected/unselected data is again sent back to the server for the save.
The below code is the usage of the control in jquery.
The function tree.getCheckedNodes() returns the array of selected checkboxes.
How would one call the above function from an knockout binding.
ko.bindingHandlers.tree = {
init: function (element, valueAccessor, allBindingsAccessor) {
},
update: function (element, valueAccessor, allBindingsAccessor) {
var options = valueAccessor() || {};
var value = ko.utils.unwrapObservable(valueAccessor());
var tree = $(element).tree(value);
}
}
In the init method:
Unwrap the widget's initial data passed by your viewmodel from the valueAccessor
Convert the initial data to the format the tree widget understands
Initialize the widget with the correct settings $(element).tree({ /* ... */ })
Attach an event listener (.on("change", function() { }) to track user-input
In the event listener function, write back the data from the UI to the viewmodel (e.g. valueAccessor() (tree.getCheckedNodes()))
Optional: add custom disposal logic to clean up the widget if knockout removes it from the DOM
In the update method, which is called if your view model's value changes
Implement the logic that updates the widget based on your new settings. Probably something like tree.check(ko.unwrap(valueAccessor())). Make sure the update is "silent", if it would trigger a change event, you'd end up in an infinite loop.
I would like to a pass a record from a grid to a window that I create,
Ext.create('MyWindow',
{recordRef: record}).show();
where record is an argument that is passed into my rowdblclick function but when I try to access recordRef (like below) during debugging, it is undefined.
var me = this;
var record = me.getView().recordRef;
The code fragment above is in a controller for MyWindow.js
The reason this is happening is probably because you are using an event to access recordRef that is called before the constructor assigns recordRef to your window as a property.
My advice would be to use the show event just to be sure, here is a fiddle: https://fiddle.sencha.com/#view/editor&fiddle/232m
You can access custom configs you add to a component with getConfig - in this case it would be this.getConfig('recordRef')
Here's a small fiddle where the custom config is logged to the console, and set to be the window's title.
I have two tabs in my dialog.First Tab is having a pathfield and second tab is having a multifield inside that only one widget of xtype selection(drop down) exist.I want to send the pathfield path as a query parameter to a servlet and want to populate json in the list.
I have done this by having a listener under drop-down widget.
i am using property render and its value:
function(){
var dialog = this.findParentByType('dialog');
var path=dialog.findById('path');
$.getJSON('/bin/demo?path=' + path.value,
function(jsonData){
this.setOptions(jsonData);
this.doLayout(false,false);
}
);
}
My JSON response is coming but setOptions is not a function error is coming.
Please Help!!!!
this value depends upon the context where you are making use of this.
I believe that is the problem here. this value would differ inside and outside the $.getJSON. You would need to bind the value of this object for the function.
The link has given the example also. Either you need to store reference of this to a variable or bind this reference using the bind method. Refer this for more details
I have some GeoJSON returned from a call to a PostGIS database. I'd like to be able to add a marker for each feature, and be able to toggle different types of marker/feature. Currently I'm using JavaScript to generate a marker for each feature, adding them to arrays according to type, and then going through the arrays setting show/hide as appropriate to toggle the 'layers'.
This works OK, but I'm wondering if the new GeoJSON functionality offers a better way to do this. As far as I can see though, all the features get added to the same datalayer and toggling sets of them would involve either setting styles or just replacing with new, pre-filtered GeoJSON.
So the question is is it possible to have more than one data layer, and easily add/remove them from the map or am I better off looking at something like OpenLayers?
EDIT: Bit more research shows it's quite straightforward.
For each type of feature in the feature collection that we want to toggle on, create a new Data object. Add all the relevant features to that data object.
var datalayer = new google.maps.Data();
datalayer.addGeoJson(feature);
datalayer.setMap(mainmap);
Then store each data object/feature type as a key-value pair. On toggle, pull out the relevant data object and setMap as appropriate:
var datalayer= featuretypesobj["feature type to toggle"];
datalayer.setMap(mymap); //or
datalayer.setMap(null);
You can also create separate layers
var layer_1 = new google.maps.Data();
var layer_2 = new google.maps.Data();
then populate it, e.g. with json data
layer_1.loadGeoJson('/path/to/data.json');
layer_2.loadGeoJson('/path/to/data2.json');
then add / remove them on the map
layer_1.setMap(map);
layer_2.setMap(map);
layer_1.setMap(null);
To Add:
var layer_1 = new google.maps.Data(); should be done inside map initialization function, as:
var map;
var data_layer_for_ramps;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(-33.897907, 151.179138),//-33.8151,151.0032
mapTypeId: 'roadmap'
});
data_layer_for_ramps = new google.maps.Data();
}
Let say you are defining a Backbone.js Model. From the documentation we have ...
new Model([attributes], [options])
This seems great for passing some default attributes to a model. When passed the model automatically inherits those attributes and their respective values. Nothing to do. Awesome!
On they other hand lets say we have a Collection of that model.
new Backbone.Collection([models], [options])
Okay, cool we can pass some initial models and some options. But, I have no initial models and no options I need to pass so let's continue. I am going to fetch the models from the server.
collection.fetch([options])
Well I don't have any options, but I want to pass some attributes to add to each models as it is fetched. I could do this by passing them as options and then adding them to the attributes hash in the initialize for the model, but this seems messy.
Is their a Backbone.js native way to do this?
You can pass the attributes as options to fetch and over-ride the collection's parse method to extend the passed options (attributes) on the response.
The solution would look like the following:
var Collection = Backbone.Collection.extend({
url:'someUrl',
parse:function(resp,options) {
if (options.attributesToAdd) {
for (var i=0;i<resp.length;i++)
_.extend(resp[i],options.attributesToAdd);
}
return resp;
}
});
Then to add attributes when you call fetch on the collection, you can:
var collection = new Collection();
collection.fetch({
attributesToAdd:{foo:'bar',more:'foobar'}
});
You may have to tweak the code a bit to work with your JSON structure, but hopefully this will get you started in the correct direction.