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;
}
}
});
Related
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
All I want to do is capture an event every time an item in a Grid using CheckBoxSelectionModel is either checked or unchecked. The checked/selected part is easy using the SelectionHandler. I'm not seeing anything that fires a deselection event in a multi-select mode though. I have a grid with 1000 items or so, and I let users multi-select items to track on a map. It's not giong to perform well to scan the entire model whenever a selection changes so I'm wondering how to handle this.
You are correct. SelectionHandler will only provide checked/selected status. I had a similar requirement and I solved it by overriding the onSelectChange() method of CheckBoxSelectionModel.
Here is the sample code for your reference.
IdentityValueProvider<VO> identity = new IdentityValueProvider<VO>();
CheckBoxSelectionModel<VO> sm = new CheckBoxSelectionModel<VO>(identity) {
protected void onSelectChange(VO model, boolean select) {
super.onSelectChange(model, select);
if (select) {
// Do something on select ...
} else {
// Do something on deselect ...
}
};
};
Hope this helps.
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
I have a grid and when I click on a button in the toolbar of the panel I want to check if a row in the grid is selected.
If true I need de value of one cell of that row, so I can put it behind a url.
But I have no idea how I can use the selection model to get the cell value of a selected row in EXT JS 4.
Perhaps try something like:
grid.getSelectionModel().getSelection()
This will return an array of all selected records withing the grid.
Then, you can iterate over the selection, find your row and call row.get('PropName') to get the value.
Hope this helps.
You're approaching the issue backwards though. You want to register for the 'selectionchange' event from the grid.
thisController.control ({'#mygrid':
{
selectionchange:onSelectionChange}
});
function:onSelectionChange(model, selected, eOpts )
{
//do work here
}
So basically you want to create an event driven model.
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