Develop Reference

How to programmatically disable cells in a Ext.grid.EditorGridPanel

I have a web application that uses ExtJS 4 that incorporates a Ext.grid.EditorGridPanel.
One of the columns of the Ext.grid.EditorGridPanel has a combobox editor that I would like to disable programmatically when the store loads based on the value of another field in the store.
It seems like this should be pretty simple - but so far nothing seems to work.
When the Grid's store loads, I have a listener to check each row and disable the combobox in index 4 depending on the value of another field.
The only thing that I can't get to work is actually disabling the combobox.
Any suggestions?
Here is the psuedo-code. Thanks in advance
listeners: {
'load': function(st, records, options) {
var view = getMyEditorGridPanel().getView();
for (var i = 0; i < this.getCount(); i++) {
if (store.getAt(i).get('setDisabled') === 'Y') {
//The cell at index 4 has a combobox editor - I CAN'T GET IT TO DISABLE!!
view.getCell(i,4).setDisabled(true);
}
}
}

From my point of view you have two different things you need to manage here:
Cell Styling, the way a cell looks when not being edited (either is enabled or disabled)
Editor Availability, how to react when a cell is about to be edited (should be possible to edit the cell)
Cell Styling
For the first one I would advice to provide a style to each cell in order to make it look disabled, this can be achieved during rendering time instead trying to do it when the store loads (btw nothing ensures you that the grid items have been fully rendered just after getting the load event callback). You can return a custom class per row by providing an implementation to Ext.grid.ViewView.getRowClass
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store) {
return record.get("disabled") ? "mail-disabled" : "";
}
}
Editor Availability
You will also need to handle the Ext.grid.plugin.CellEditingView.beforeedit event and provide a custom logic to determine when the editor will be available
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, e, eOpts) {
return e.record.get("disabled") == false;
}
}
})]
You can find a working example of both solutions here, hope it helps to solve your problem.

Dynamically setting multiSelect for combobox in extJS

I am kinda facing an interesting problem with my combobox's multiSelect property.
I have a grid with three columns ID, Name, Associated Part.
I have enabled Rowediting plugin and editors for ID is textfield(EditID), Name is textfield(EditName) and Associated Part is combobox(EditPartCombo with multiSelect true).
I have two buttons Add and Update.
When I select any row in the grid and press Update, rowediting starts at that exact position. In the Update button code, i am setting the multiselect property of EditPartCombo to false but somehow it is not reflecting.
Code on Update button:
{
text: 'Update Press',
handler: function(btn){
var grid = btn.up('grid');
var selection = grid.getSelectionModel().getSelection();
if(selection.length > 0){
combo = Ext.getCmp('EditPartCombo');
combo.multiSelect = false;
delete combo.picker;
combo.createPicker();
combo.reset();
var rowEditing = grid.getPlugin('RowEditPlugin');
var rowno = grid.store.indexOf(selection[0]);
rowEditing.cancelEdit();
rowEditing.startEdit(rowno, 1);
}
else{ Ext.Msg.alert('Error' , 'Please Select a row to Update'); }
}
In firebug when I inspect combo - it shows that multiSelect as false but still i am able to select multiple values.
Not sure what am I doing wrong?
Please help.
Thanks in advance.

If you cange a config value after a component is created, it is not guaranteed that this value is applied. For some config option, it is and for other it doesn't work.
I would recommend you to Ext.create the combobox, and inject this multiSelect configuration at that time. Like this for one button you create it with multiSelect enabled, and disabled for the other.

Ext js highlight text

I want to highlight a text inside a text field in EXT js.
I add the text to the text field dynamically like this:
this.getCopyText().setValue('text to be added');
/|\
|
reference
I tried using the focus method but it does not provide the correct effect.
Can this be achieved by any chance?
EDIT: Setting the selectText propertie of focus function to true does not help.

I had a similar problem with highlighting text in textfield in a window on show, for me the issue of the field not getting focus and not being highlighted was solved by defering the focus call like this:
var me = this;
me.on('show', function () {
Ext.defer(function () {
me.getCopyText().focus(true);
}, 1);
}, me)

DOJO error Id is already registered

Hi I'm new bee to dojo and stuck into a simple problem. I'm getting an error
Tried to register widget with id==listGrid but that id is already registered. Let me share a piiece of my code with you
I have Three radio button and onclick on any of the radio button will result in grid. I'm using same div for all three radio button. First time the grid will come for first radio button but second time I get an above error. I'm calling this function on click of radio button
_showList:function()
{
var item = this.gc.getSelectedItem()
var id=item.id;
var cont = 'zone';
var action='getCityListById';
var controller='network';
this.cityGc = new GridViewControl({columns:
[
{action:action, controllerName:controller,parameters: {id:item.id, cont: cont}},
{name:"City Name", field:"name", width: "200px", editable: false}
], diff:220
},this.zoneListGrid);
}
zoneListGrid is a dojo attach point which is same for all three radio buttons. please suggest something through which I can work out. Thanks in advance

Since every click on a radio button will trigger this piece of code, dojo will try to create another grid component on the second click. Because there is already a widget present on that attach point, the error is thrown.
Either you re-use the grid that is already present (do a === null check on this.cityGc) or you destroy the existing grid first (this.cityGc.destroy()).

set value to jquery autocomplete combobox

I am using jquery autocomplete combobox
and everything is ok. But I also want to set specific value through JavaScript like $("#value").val("somevalue") and it set to select element, but no changes in input element with autocomplete.
Of course, I can select this input and set value directly, but is it some other ways to do that? I try set bind to this.element like this.element.bind("change", function(){alert(1)}) but it was no effects. And I don't know why.
Edit
I found a workaround for this case. But I don't like it. I have added the following code to _create function for ui.combobox
this.element.bind("change", function() {
input.val( $(select).find("option:selected").text());
});
And when I need to change the value I can use $("#selector").val("specificvalue").trigger("change");

Is this demo what you are looking for?
The link sets the value of the jQuery UI autocomplete to Java. The focus is left on the input so that the normal keyboard events can be used to navigate the options.
Edit: How about adding another function to the combobox like this:
autocomplete : function(value) {
this.element.val(value);
this.input.val(value);
}
and calling it with the value you want to set:
$('#combobox').combobox('autocomplete', 'Java');
Updated demo
I cannot find any available existing function to do what you want, but this seems to work nicely for me. Hope it is closer to the behaviour you require.

I managed a quick and dirty way of setting the value. But, you do need to know both the value and the text of the item that you want to display on the dropdown.
var myValue = foo; // value that you want selected
var myText = bar; // text that you want to display
// You first need to set the value of the (hidden) select list
$('#myCombo').val(myValue);
// ...then you need to set the display text of the actual autocomplete box.
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText);

#andyb,
i think rewrite:
autocomplete: function (value) {
this.element.val(value);
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input.val(value);
}

I really like what andyb did, but I needed it to do a little more around event handling to be able to handle triggering the a change event because "selected" doesn't handle when hitting enter or losing focus on the input (hitting tab or mouse click).
As such, using what andyb did as a base as well as the latest version of the jQuery Autocomplete script, I created the following solution: DEMO
Enter: Chooses the first item if menu is visible
Focus Lost: Partial match triggers not found message and clears entry (jQuery UI), but fully typed answer "selects" that value (not case sensative)
How Change method can be utlized:
$("#combobox").combobox({
selected: function (event, ui) {
$("#output").text("Selected Event >>> " + $("#combobox").val());
}
})
.change(function (e) {
$("#output").text("Change Event >>> " + $("#combobox").val());
});
Hopefully this helps others who need additional change event functionality to compensate for gaps that "selected" leaves open.

http://jsfiddle.net/nhJDd/
$(".document").ready(function(){
$("select option:eq(1)").val("someNewVal");
$("select option:eq(1)").text("Another Val");
$("select option:eq(1)").attr('selected', 'selected');
});
here is a working example and jquery, I am assuming you want to change the value of a select, change its text face and also have it selected at page load?
#
Attempt 2:
here is another fiddle: http://jsfiddle.net/HafLW/1/ , do you mean that you select an option, then you want to append that value to the autocomplete of a input area?
$(".document").ready(function(){
someString = "this,that";
$("input").autocomplete({source: someString.split(",")});
$("select").change(function(){
alert($(this).val()+" appended");
someString = someString+","+$(this).val();
$("input").autocomplete({source: someString.split(",")});
});
});