I am building an application where the user browses certain objects by scrolling and zooming. To change the zoom level I have successfully implemented a "dijit.form.HorizontalSlider" object. Every time the user changes the position of the silder, I can catch the "onChange" call and do something with that.
However, the user can also zoom-in by double clicking inside the view zone, at which point the slider should change position automatically to reflect the new zoom level.
My question is the following: what function or method should I call in my javascript to update the position of a dojo silder ?
Here is the code that creates the silder object:
var zoomSlider = new dijit.form.HorizontalSlider({
name: "zoom_slider",
id: "zoom_slider",
value: 0,
minimum: 0,
maximum: 19,
discreteValues: 20,
intermediateChanges: false,
style: "width: 160px;",
onChange: function(value) {
brwsr.view.zoomTo(value);
}
},
"zoom_slider");
navbox_silder.appendChild(zoomSlider.domNode);
First you need to define an id property in your example's config object like id:'zoom_slider1' to get a hold of the widget and then access it like this:
dijit.byId('zoom_slider1').attr('value',whateverthenewvalueis);
See Dijit Basics.
After DanMan's idea of adding an "id" field to the slider creation code, I dug into dojo's javascript files and found the appropriate undocumented internal method. This is it:
dijit.byId("zoom_slider")._setValueAttr(newvalue);
Related
The requirement is to display autocomplete addresses based on the region selected. The Jquery autocomplete is called everytime the region changes. I am getting the correct autocomplete addresses based on the region. But along with the new address list, I also get the address list for previously selected regions.
To solve this problem, I used - $("#address).removeData('events').autocomplete(...)
This solves the problem. But a new problem is introduced now! The scrolling in the autocomplete list does not work properly, items are skipped on pressing down arrow key/up arrow key.
Here is the code snippet:
$("#address).removeData('events').autocomplete({
serviceUrl : 'mysource',
minChars : 2,
params : {
region : selectedRegion
},
noCache : true,
width : 350,
maxHeight : 170,
onSelect : function (value) {
...
...
}
});
Can somebody suggest me the correct approach? I am using jquey.autocomplete-min.js
If youre getting an additional appearing alongside jquery's autocomplete list, it may be an issue with your browser trying to autocomplete the input.
trying adding the autocomplete="off" attribute to the input field you're autocompleting
As mentioned in this answer the issue might not be with your code snippet but with browser http caching in general.
Well, the following worked like a charm to me
var ac = $("#address").autocomplete();
The next time, the region is changed, instead of calling autocomplete()
again, I just do this -
ac.setOptions({ params:{ region : selectedRegion}});
This updates the existing call with new region. I will no more see autocomplete suggestions for the previous selections.
This is my first time working with datagrids so please forgive anything that is unclear.
I have json text that is being implemented in a dojo datagrid (dojox.grid.DataGrid).
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "xAgent.xsp"});
var layout = [
{cells:[ [
{field:'firstname', name:'First'},
{field:'lastname', name:'Last'},
{field:'policy', name:'Policy'},
{field:'lastaccessed', name:'Last Accessed'}
] ], noscroll:false
}
];
grid = new dojox.grid.DataGrid({
store: jsonStore,
structure: layout,
rowsPerPage: 50,
autoHeight: 50
}, '#{id:gridNode}');
grid.startup();
The grid itself is created perfectly fine and all data is displayed as desired, but I would like for one of the fields (the 'policy' field to be specific) to link towards another page. I need to include the information within the 'policy' field when I redirect as the policy number will be used in the next page.
In other words, I want all of the policy fields within my table to have their own unique external link that will contain the policy number from that respective field. The easiest way I can think of doing that is by changing the layout variable that feeds into the DataGrid's structure parameter, but there might be an easier way. If anyone has any ideas I would be very grateful.
Thanks in advance.
You can use formatter to create links, dojo buttons etc inside the grid.
Formatter is a JavaScript function that is called which returns the value to be shown in the cell. The value from the data store is passed as a parameter to the function. The returned value that is inserted into the page can be any legal HTML or even a dijit widget.
So in your case, add a formatter to policy column
{field:'policy', name:'Policy', formatter: createLink},
Then define the function with necessary external link. For example:
function createLink(data){
return (""+data+"");
}
Reference: http://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#id3
I am using the jQRangeSlider library. I do not see any documentation about this. I am trying to change the size of the slider after the constructor has already been run.
<div id="dateSlider"></div>
<script>
$("#dateSlider").dateRangeSlider({
bounds:{
min: new Date("$oldest"),
max: new Date("$newest")
},
defaultValues:{
min: new Date(2002,01,17),
max: new Date(2007,01,17)
}});
</script>
Specifically what I am trying to do is:
User selects date with slider
User hits submit button and form gets submitted
Returned results get filtered by selected date range AND
Date range is still selected on the jQRangeSlider <-- Because of the way my project is setup, I will need to do it after jQRangeSlider constructor has run.
Is there a way to do this?
Are you sure you looked everywhere? :)
http://ghusse.github.io/jQRangeSlider/methods.html#resizeMethod
I have a jquery range slider that I am using to select a percentage of color for an overall image and it can have a dynamic number of handles based on how many elements the user decides to use. I am trying to display the percentage for each of the individual handles of the slider in the handles themselves. I have not had luck in figuring this one out and I'm hoping to get some help/direction.
I have found a number of examples on the net that have selected the ".ui-slider-handle" and then modified the text but I can only seem to get this to change one or all of them to the same text. I also got the slider object and then got its children, then iterated through the children and tried changing the text val for each but it never changes it. Any ideas?
This doesn't work:
myslider.slider({
min: 0,
max: 100,
orientation: 'vertical',
values: handles,
slide: function( event, ui ) {
var handleText = $(this)[0].children[0].text;
handleText = "Test";
console.log("val should be changed: ",handleText);
//The below line works, however it changes them all to the same value
//myslider.find("a.ui-slider-handle").text(ui.values);
}
});
Edited answer: You can use each() to do what you want (and here's a working jsFiddle):
myslider.find("a.ui-slider-handle").each(function( index ) {
$(this).text(ui.values[index]);
});
Let's break it down:
myslider.find("a.ui-slider-handle") - get all the handle objects, just like you're doing right now.
.each(function( index ) { - apply a function to each element that we just found, using its index in the jQuery object as an argument. each() is what's doing the heavy lifting; more on it here.
$(this).text(ui.values[index]); - make this handle's text the value from our values object that corresponds to this handle's index.
}); - close up the shop.
That should do the trick!
Note: myslider.find("a.ui-slider-handle").text(ui.values); didn't work because, while it selected all the correct handles, it just assigned them one value - your values sequence. You need to use the above method to break up the contents of values and apply them to the handles separately.
I am trying to create a custom container but can't figure just how to do it.
I need it to look like this:
(don't pay attention that it is RTL, this is only a sketch to get started)
where the orange fonts are the title of the page that I would like to be an H1 element.
It has a simple search and an advance search that pops open when the little arrow next to the search button is clicked.
Questions:
1) What should I extend for that ?
2) How can I implement different advance search forms for different pages ?
3) how can I place a setter for the title that controllers can interact with and manipulate the dom ?
basically any advice will be good as I need a start point.
thanks
There are lots of ways of doing this, but this is what I would do.
I'm not sure about the "advanced forms for different pages" can you go into mre detail about that? Are you looking to autogenerate a search form somehow?
Extend Ext.form.Panel, and use a table layout for the fields
See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table
use a "tbar" on the panel instead of setting "title". you can place the search combo, tbfill, then a tbtext for the "title". As a convenience you can override the setTitle function of the panel to manipulate this tbtext field instead of the normal behavior. Something like this:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.myform',
layout:{
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
//overridden setTitle
setTitle:function(title){
Ext.getCmp(this.id + "_search_combo").setText(title)
},
defaults:{
xtype:"combo",
//rest of combo config here
},
items:[{
//...
}],
initComponent:function(config){
this.tbar = tbar:[{
xtype:"combo",
//...
id:this.id + "_search_combo"
},{
xtype:"tbfill"
},{
xtype:"tbText",
cls:"my_form_title",
value:this.title||""
}]
//prevent default title behavior
delete this.title
this.callParent(arguments);
}
})
I would suggest you to just extend from Ext.panel.Panel itself, and hijack the dom for all those customized items, add in search bar, etc. If you do not want any of the fancy stuff from Ext.panel.Panel, you can also extend it from Ext.Component, or Ext.container.Container (to contains more components), and even the lowest Ext.util.Observable.
It seems like you might need to extend a few Ext.menu.Menu and defines some different set of input boxes, so that you could benefit from creating a floated menu (if that's what you want). Or if you have time, you can even just extend from Ext.Component and build your own customized component, or even lower, Ext.util.Observable.
The setter? It will be in the extended component in (1) then :)
All of these serve as rough opinions. They could be different depends on your requirement.