I have multiselect component in our application, we have 2 different views of the same form.
View 1 - All the components would be editable and selectable
View 2 - Whereas in this view, user can only see the selection that he made in View1(disable all the form components). Using the below code i disabled all the form components. But the problem here with the multiselect component, even though i disabled the editing capability from the user, still i want to allow them for scrolling through the list.
this.getView().query('form displayfield,textfield,radiogroup,multiselect').forEach(function(item) {
item.setDisabled(true);
});
I tried to the disable the Selection using the listConfig property, this works. But dynamically i couldn't able to apply this property.
{
xtype:'multiselect',
fieldLabel: 'Employee Names',
valueField: 'enameCode',
displayField: 'enameValue',
listConfig : {
disableSelection: true
}
}
How can i achieve this? Please provide your valuable inputs, thanks in advance.
Thanks!
Given that disableSelection: true works for you, you should be able to achieve the same effect dynamically by calling:
YourMultiselectComponent.boundList.getSelectionModel().setLocked(true)
You should be able to call the functions disable and enable on the BoundList associated with the multiselect to achieve this dynamically.
Like follows...
Ext.ComponentQuery.query('boundlist').forEach(function(item) {
item.disable();
});
EDIT:
So I just realised that this doesn't entirely solve your problem as scrolling will still be disabled after calling the disable function. This is because ExtJS applies a mask to the entire element (including the scrollbar) that is disabled to prevent user interaction.
One thing you could do is to modify the style (width in this case) of the mask DOM element. It may not be the most elegant solution but it would fix your problem.
Ext.ComponentQuery.query('boundlist').forEach(function(boundlist) {
boundlist.disable();
var boundlistDOM = boundlist.el.dom;
var maskDOM = boundlistDOM.getElementsByClassName('x-mask')[0];
mask.style.width = "94%"; // or value so that the mask does not cover scrollbar
});
Related
The following form is nearly completely editable without mouse:
https://fiddle.sencha.com/#view/editor&fiddle/2gsi
The only thing that is not accessible is the trigger of the textareafield.
Since the textareafield is typeable, I would like to make the trigger of the textareafield tabbable. Tab is the only thing I think I can use without hindering general ability to type.
How can I do this? I have not found anything in the trigger documentation
Not quite a complete answer, but too long to be a comment, and it might be helpful to you. Here is one possible solution: https://fiddle.sencha.com/#view/editor&fiddle/2gt8
I have overridden the trigger's renderTpl config by making the top level element a button (by default it is a div), and I've added some styling to it.
You can make the div tabable with tabindex, but the issue will be that when you press enter on the focused trigger, it will not execute the handler.
With the current approach, the single issue is that the textarea's focused styling gets messed up. When you press press tab after being focused on the trigger, the textarea will still keep the focused class.
You could set a keyboard shortcut for it, like that:
xtype: 'textareafield',
fieldLabel: 'Name',
enableKeyEvents: true, //important
listeners: {
keydown: function (a,e){
if ((e.altKey)&&(e.keyCode==73)){ //in that case Alt+i , but you could use any other combination
a.getTriggers().book.el.dom.click();
}
}
}
Hope that helps
I have a grid of data in ExtJS 4 which contains a checkbox column. I need to disable the checkbox programmatically after the grid has loaded, following an external AJAX call. (Basically, after making the AJAX call, I need to stop users from changing the checkbox. This is not a store update). I do have a reference to the row itself.
I have seen several similar questions, but they all seem to deal with disabling a row or cell edit when the data is initially loaded.
If I understand you correctly you wan't to stop users editing your grid inline. In order to do this use the processEvent function on your grid and return false so any edit they try to make is immediately returned.
{
xtype: 'checkcolumn',
dataIndex: 'someModelReference',
// Prevents toggling the checkbox inline
processEvent: function() {
return false;
}
}
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 have an ExtJS grid with a store that is filtered and sorted remotely. These requests are handled serverside using PHP.
I also have a button in the grid's toolbar to remove the filters on the store that uses the entryGrid.filters.clearFilters() function.
I would like to enable/disable this button depending on if there are any filters active on the store. So that when de store is loaded for the first time (without any filters) the button is disabled.
So I thought about putting a listener on the store.load function.
What would be the cleanest way to check if there are any filters active, if indeed this is possible?
I searched the manual (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store) for grid, store and filters, but couldn't find any reference..
Thanks in advance
I don't know if you already tried using listeners but i'd do it like this (in the store):
listeners: {
load: function(){
if(!this.isFiltered())
{
//<add actions to disable the button>
}
}
}
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'}