I have developed my application using ExtJs 4.1. I have a combobox which gets populated using Ajax call. Once the comobox is populated, I need to find an item by name and then first the select event for that item.
The problem is the way combo-box is rendered by ExtJS. I am not sure how to select an item in the right manner. CombBox is not really a <select> element but a text input with a detached drop-down list that's somewhere at the bottom of the document tree.
I do not want to hard code the id's as ExtJS randomly generate the id.
This is how the generated HTML looks
You can check the example of ExtJs combobox here
Without testing, I would suggest,
var x = require("casper").selectXPath;
casper.thenClick(".x-form-trigger.x-form-arrow-trigger")
.wait(100)
.thenClick(x("//li[contains(#class,'x-boundlist-item') and contains(text(),'Alaska')]"))
.wait(100, function(){
this.capture("screenshot.png");
});
You might also need to move the mouse into position before clicking. Use
casper.then(function(){
this.mouse.move(selector)
});
Since you have the ComboBox in a form, you could use the "name" property in the ComboBox definition and select it with:
Ext.getCmp("idOfThePanel").down('form').getForm().findField('name');
Another option, use the "reference" property. In this case I'm not sure which is the correct way to select the ComoBox:
Ext.getCmp("idOfThePanel").down('form').getForm().lookupReference('reference');
or
Ext.getCmp("idOfThePanel").lookupReference('reference');
Related
The code im working on first makes a call to the database. Through this call, it is determined wether there are available workstations in the office or not.
If there are available workstations, "option" elements are added to a "select" element. This is achieved via jquery:
$('#idofselectelement').html(data)
Where "data" represents the markup to be inserted into the "select" element.
Now, my problem is that I'm trying to implement some code which checks wether your "favorite workstation" is available in the selected timeframe and then automatically preselects the respective workstation from the dropdownmenu in the "select" element. Everything is working so far, except for the selection of the workstation from the dropdown menu :/
The part of
I'm rather new to programming with javascript and the HTML DOM, so I'm not sure whether the fact that the options im trying to chose from are added during the runtime?
The code I've tried to manipulate the dropdown menu with is like this:
$('#idofselectelement').val(favoriteworkstation);
However, as I said, this doesn't work.
I've also already tried to output (console.log) the select element's length property right after the code which adds the markup with the available options has run.
But according to the output Im getting, the length is zero Oo
However, the dropdownmenu is definitely being created AND I can indeed manipulate it, but unfortunately not in the way I want to.
If I add an onclick event which sets the value of the respective select element, then the value in the select field indeed changes to the value specified in the event handler.
So I wonder why I can't have the favorite workstation preselected after the timeframe was chosen...
EDIT:
For further insight into the problem, I'm adding a bit more code here.
This is what the HTML Select element looks like BEFORE anything is added during the runtime:
<label for="#sitz">Sitz Nr.</label>
<select type="text" class="form-control" id="sitz" name="sitz" value="">
the markup which is added during the runtime
<option>workstationvalue</option>
<option>workstationvalue</option>
//and so on, depending on the situation...
This is a timing issue.
The js trying to find the element is faster than the actual add of the element to DOM.
Can you describe what you want to do? You might be able to do that before adding the element to DOM.
Editing before adding to DOM is possible if you convert your String to an jQuery object
var $jqueryObject = $(data);
$jqueryObject.find('.classYouSearch').val(value);
$('.whereToAd').html($jqueryObject);
In ExtJS I have something rather weird with my combobox.
The combobox is populated but in some cases, all but the 2 first entries are removed.
If I stay on the same page and process a new item on this screen (thus the all fields and thus the combobox would be reloaded), the combobox is now completely populated however the remove function is runned.
The weird thing is that all items are in the combobox, but the only the items that didn't get removed are in fact selectable and clickable. If I would click any other item that is visible in the list, it just wouldn't do anything (even the combobox wouldn't collapse).
What could be the cause of this?
I know you guys want code but it's simple impossible to post code because the code at the company I work at is so huge and complex that there would be too much to paste in here. I'm just wondering if any of you guys have had something similar.
Also, a textbox is above the combobox. If you would fill in the textbox with a value from the combobox, the combobox would jump to the correct value. With the 2nd run (which I described above), if I would type a value that is visible in the combobox but unselectable, it would not jump to that value in the combobox. It seems that these values are only visible but that's it.
EDIT:
Some other weird behavior: if I click in the combobox (so you can actually type text) and press any button, the combobox will be magically transformed to the correct form. By this I mean that only the 2 first items are now visible. I do not have any listener that would do this on my combobox...
Perhaps a "refresh" of that combobox would be enough? However, this doesn't explain then why the combobox behaved that way in the first place. Got it in FF and IE.
Without the code, you say you cannot provide, I can only guess: See if you have idProperty defined for the model and if the idProperty matches one of the fields, if valueField of the combo is same as the value of idProperty and last if you receive records with unique ids from the server. The combo config should look similar to this:
Ext.define('ComboModel',{
extend:'Ext.data.Model'
,idProperty:'custId'
,fields:[
{name:'custId', type:'int'}
,{name:'custName', type:'string'}
]
});
Ext.define('ComboStore',{
extend:'Ext.data.Store'
,model:'ComboModel'
});
Ext.create('Ext.form.field.ComboBox',{
store:Ext.create('ComboStore')
,valueField:'custId'
,displayField:'custName'
});
Of course you would most likely need additional config options for the above classes. And custId must be unique for all combo store records.
In the end I got it solved by binding the store again to it's combobox. While debugging with Firebug, I saw that there were only 2 items in the store, and not all those that were visible.
A short example below:
var ddl = Ext.getCmp('DDL');
var ddlStore = ddl.store;
...
//some manipulation of the data here
...
ddlDocType.bindStore(ddlDocTypeStore);
The bindStore() function is not documented in the official docs...
I'm having a difficulty using the jQuery combobox widget as mentioned here:
I'm using jQuery to load the options for the select using ajax, which means that upon creation of the combobox, there are no options in it. When I get the values from the ajax call, I set the first option to be be selected. This works fine for the underlying select, but not for the input-field which jQuery combobox has added.
I've seen the solution here but this will not work if the options are added after _create is called(also, it is kinda outdated since the widget by default handles this).
As far as I can tell, there are no relationsship between the underlying combobox and the input-field that makes the one update the other. Or am i wrong here?
Regards,
Runar
ok..solved this myself adding the following code snippet in _create :
select.change(function() {
var selected = select.children( ":selected" );
input.val(selected.val() ? selected.text() : "");
});
Then invoked change on the combo after values had been populated.
I'm working with jQuery and a plugin called jQuery.SelectBox
I have 3 selectboxes, selecting an option in the first selectbox will change the options in the second one.
My problem comes when I try to insert values in the second selectbox via append function in jQuery. Everything works fine but the new options are not clickable.
You can see the problem right here: http://incubadora.gelattina.com/impac/galeria.html (scroll down and to the right), there are the three selectboxes.
From what I understand, you put in a normal select, and this does a dynamic creation of a stylized 'select box' via jQuery.
The problem, I would guess, is that, since you're adding items after the select box's initialization, the new items don't have any sort of action listeners on them.
I can't seem to find any documentation on this SelectBox plugin, but you need to find a way to Bind the click and hover actions provided by SelectBox onto you're newly added items.
You can try calling the .selectbox(); function on the select elements after you've added the new options to see if that works.
Hey I wrote a select box plugin called Selectzor, just for this reason.
It should accomplish everything you need.
I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)
Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div
Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax