Team,
I am having one problem where I donot want to expand combo box on certain flag and want to display the alert message.
there is no event like onClick in EXTJS so I tried with focus event but still combo box is expanding.
code
focus:function() {
if(this.store.baseParams.donotExpandFlag) {
alert("I should not expand this combo");
// What to do here and out side of IF block so that there is conditional expansion
}
}
You need to specifiy your ExtJS version and please format your code.
Here is what you can do for ExtJS4.x
Manually set/unset the isExpanded property. That should work (untested)
for ExtJS3.x you will have to override the the isExpanded() method and in additon apply a custom flag which indicates blocked/auto and get checked before the default code gets executed.
You may try this (untested)
_isExpanded: true, // true means block, false auto
isExpanded: function(){
return this._isExpanded || (this.list && this.list.isVisible());
},
No, this works. See the JSFiddle for ExtJS3.4
Second JSFiddle for ExtJS3.4 with a form
Related
I have a checkbox on a website, and a combobox. When that checkbox is checked, I want to change the combobox into a textfield (and of course conserve any selected value and put it in the textfield). When the checkbox is unchecked I wanna go back to display the combobox (and it's previously selected value).
Any idea how I can achieve this in ExtJS4 Please?
Thank you
Well youd start by having a listener in your controller that will run when the checkbox gets checked. In that function you should be able to pull the value from the combobox, store it in a temp variable, create (or probably unhide) your textfield, and put your temp variable value in there.
Then write the opposite for a uncheck listener action
Are you working in MVC?
hope that helps
We've implemented a similar approach.
Put a combobox inside a container and add a textfield to it. Add listeners to checkbox and use combobox.hide() and textfield.show() in handler.
Ext.define('MyComboBox',{
extend:'Ext.form.field.ComboBox',
initComponent:function() {
this.originalForceSelection = this.forceSelection;
this.callParent(arguments);
if(this.textFieldMode) this.setTextfieldMode(true);
},
function setTextfieldMode(bool)
{
if(bool) {
this.forceSelection=false;
this.setHideTrigger(true);
} else {
this.setHideTrigger(false);
this.forceSelection=this.originalForceSelection;
}
}
});
I am having a issues with a checkbox column in a grid.
I have a grid with multiple checkbox columns. When I check the box, the dirty tick is not there, however when I click on the cell that contains the checkbox, but not the check box and then click the checkbox, I get the dirty tick mark.
Has anyone see this before? I would like it to be a bit more consistent because after a few clicks the dirty marks for some rows disappear.
This just seems odd.
Thanks!
Indeed first you need to click on the cell to enter 'edit' mode and then you can check/unched the actual checkbox. For better user experience you can implement your checkboxes just the same way they are implemented in this code library article. (If you are not using ASP.NET MVC wrappers - no worries just open the project go under Views/Home/Index.cshtml and you can copy/paste the code - it is all JavaScript.
The code library also includes how to create checkboxe 'Select all' in the column header.
The way I solved it was to make the fields in the model to be non-editable, so it forces the click event to fire and then I just update the values and set the dirty property. The thing was if you clicked the cell, the edit event was fired vs the click and vice versa, so instead of having two things fire, I just disabled one. Some would call it a hack, but I can't see how else to prevent both events from firing.
Please try this one:
//Cell click Checkbox select
$('#grd' + gridName).on("click", "td", function (e) {
var selectedTd = $(e.target).closest("td");
var grdChkBox = selectedTd.parents('tr').find("td:first").find('input:checkbox');
grdChkBox.prop('checked', !grdChkBox.prop('checked'));
});
Yes, I see this quite often: depends on how you implemented the checkboxes. If you tick directly a checkbox you modify the input but not the model. If you tick the cell and then the checkbox then Kendo UI toggle to edit mode and (in background) it replaces the checkbox with an editable version of the checkbox that is managed (event handler) by Kendo UI that allows to modify the model.
EDIT: If you want your checkbox always clickable then you might do:
var grid = $("#stocks_tbl").kendoGrid({
dataSource: new kendo.data.DataSource({
...
schema: {
model: {
id : "id",
fields: {
active: { type: "boolean" }
}
}
}
}),
editable : "incell",
columns : [
{
field : "active",
title : "Active",
template: '<input type="checkbox" data-bind="source: active" #= active ? checked="checked" : ""# />'
},
...
]
}).data("kendoGrid");
Here, you define an input that is always clickable.
$(document).on("change", "[type='checkbox']", function(ev) {
var item = grid.dataItem($(this).closest("tr"));
item.set("active", ev.srcElement.checked);
});
with this, we define a handler for intercepting changes on the input and reflect them in the model.
This saves you having to play with editable
I want to prevent the default action of the combobox setting its value to the selected item in the picker. I just want to see the values in the picker and, when I click on them, nothing to happen. How can I do that?
You probably want this:
Ext.create('Ext.form.ComboBox', {
...
listeners: {
beforeselect: function() {return false;}
}
});
ExtJS still handles the DOM click internally and figures out the record that you clicked on (and you have a reference to it in beforeselect handler, see the docs), however returning false in the beforeselect event handler would prevent selecting the record and any further actions.
my grid allowing to select multiple row selection that is once i click on cell and press shift+arrow down button it allows me to select next set of records i wanted to disable this functionality how it can be done,on grid level how to catch keypress events and return false once shift+arrow down button is pressed
For ExtJS 3.x add this to the grid properties:
selModel: new Ext.grid.rowSelectionModel({singleSelect:true})
Grids behave as you want by default. Make sure you have NOT set multiSelect or simpleSelect to true.
Firstly, it's hard to understand your question without any punctuation. Secondly, without any code example, it's even harder to understand a question without any punctuations.
Here's my guess answer of your question:
editorgridpanel.on('keypress', function (e) {
if (e.shiftKey === true && e.getKey() === e.DOWN) {
e.stopEvent(); //this will stop the shift+down keypress event from proceeding.
}
});
The accepted answer seems to be a bit out of date. For version ExtJS4.x use this solution :
selModel: new Ext.selection.Model({mode: 'SINGLE'})
Or just use this :
selModel: {mode: 'SINGLE'}
I have a window containing a form (formPanel). Users can show this window clicking on a button in an ExtJS environment. I would like that when the user clicks the button to show the window, a specific field inside the form contained by the window will focus (by this I mean that the cursor should move to that field so that the user can insert data without needing to click on the field itself first).
I tried some solutions, but could not get them work. Any hints?
Here is what I tried, using some examples I found... but it does not work as expected. This function() is called by the ExtJS button in my interface:
function openCardForm(IDUser){
//Reset the value of this field which may be still there from the prev. usage
Ext.getCmp('assignFormCARDNUMBER').reset();
formAssignCard.getForm().load({
url: 'gen/jsonUser.php',
params:{IDUser:IDUser},
waitMsg: 'Loading...'
});
//Try to focus the Card field when rendering the form
Ext.getCmp('assignFormCARDNUMBER').on("render",function(){
Ext.getCmp('assignFormCARDNUMBER').focus(true,10);
});
win.show();
}
try on show instead.
Or Use
defaultButton : yourComponentToFocusOn
A bit confusing but the defaultButton can be any component (not necessary to be an actual button)
You can also try setting the tabindex of the field to zero in its config options...that way you wont even need to add a listener to detect the show event.
ie:
tabIndex:0