I am newbie to ExtJS I have the following lines of code that is working fine on select event and now I am planning to add on blur event too.
autoResolve.on("select" || "blur", function (component, record, index) {
var fieldSet = utils.getComponentFromMngr(component.id.split("~")[0]);
if(autoResolveData.CURRSEL){ //Set previous selection property
var xmlElem = fieldSet.DomainXML.documentElement.childNodes[1];
xmlElem.setAttribute("PR_DOMAINTYPE",autoResolveData.FILL_SUBTYP);
xmlElem.setAttribute("PR_DOMAINID", record.get("ITEMID"));
xmlElem.setAttribute("PR_DOMAINVALUE", record.data.TITLE);
fieldSet.DomainObj.push({PRDomainType:autoResolveData.FILL_SUBTYP,PRDomainID:record.get("ITEMID"),PRDomainValue:record.data.TITLE});
}
it is still working fine on select event but not on blur event where am I going wrong please suggest
"select" || "blur" will return select, as you can find out if you type the following in browser console:
console.log("select" || "blur");
Furthermore, "blur" event does not have record as the second parameter. You would have to look how to get record and call the function with a valid record parameter.
What you want to achieve is roughly the following:
var myFunction = function (component, record, index) {
var fieldSet = utils.getComponentFromMngr(component.id.split("~")[0]);
if(autoResolveData.CURRSEL){ //Set previous selection property
var xmlElem = fieldSet.DomainXML.documentElement.childNodes[1];
xmlElem.setAttribute("PR_DOMAINTYPE",autoResolveData.FILL_SUBTYP);
xmlElem.setAttribute("PR_DOMAINID", record.get("ITEMID"));
xmlElem.setAttribute("PR_DOMAINVALUE", record.data.TITLE);
fieldSet.DomainObj.push({PRDomainType:autoResolveData.FILL_SUBTYP,PRDomainID:record.get("ITEMID"),PRDomainValue:record.data.TITLE});
}
};
autoResolve.on({
select:myFunction,
blur:function(component) {
var record = ... // your special magic here
return myFunction(component,record);
}
});
Related
I encountered this bug where the column filter is incorrect if the grid has a locked column
Here's the fiddle: sencha fillde
Steps to reproduce:
(Do not apply any filter)
Open the "Email" column menu
Open "Name" column menu (this is the locked column)
Open "Phone" column menu (notice that the filter menu is incorrect, it is showing the filter for "Email" column).
For grid that has no 'locked' columns the filter menu is working fine, thanks for anyone who can help!
Okay, this one was a bit tricky. It turns out that for a locked grid, the Ext.grid.filters.Filters:onMenuCreate gets hit twice... one for each side of the grid's menu that shows. The problem is that in the onMenuCreate, the framework doesn't account for the 2 menus. It only cares about the last menu that gets created and destroys the previous menu's listeners. In onMenuBeforeShow, the framework does account for each side of the grid, so I extended this idea into an override. I would encourage you to create a Sencha Support ticket for this, and if you don't have access, let me know, so I can submit one. Fiddle here.
Ext.override(Ext.grid.filters.Filters, {
onMenuCreate: function (headerCt, menu) {
var me = this;
// TODO: OLD BAD CODE... this would destroy the first menu's listeners
// if (me.headerMenuListeners) {
// Ext.destroy(me.headerMenuListeners);
// me.headerMenuListeners = null;
// }
// me.headerMenuListeners = menu.on({
// beforeshow: me.onMenuBeforeShow,
// destroyable: true,
// scope: me
// });
// Just like in the onMenuBeforeShow, we need to create a hash of our menus
// and their listeners... if we don't, we remove the 1st menu's listeners
// when the 2nd menu is created
if (!me.headerMenuListeners) {
me.headerMenuListeners = {};
}
var parentTableId = headerCt.ownerCt.id;
var menuListener = me.headerMenuListeners[parentTableId];
if (menuListener) {
Ext.destroy(menuListener);
me.headerMenuListeners[parentTableId] = null;
}
me.headerMenuListeners[parentTableId] = menu.on({
beforeshow: me.onMenuBeforeShow,
destroyable: true,
scope: me
});
},
destroy: function () {
var me = this,
filterMenuItem = me.filterMenuItem,
item;
// TODO: ADDING THIS AND REMOVING FROM THE Ext.destroy on the next line
var headerMenuListeners = this.headerMenuListeners;
Ext.destroy(me.headerCtListeners, me.gridListeners);
me.bindStore(null);
me.sep = Ext.destroy(me.sep);
for (item in filterMenuItem) {
filterMenuItem[item].destroy();
}
// TODO: ADDING THIS AND REMOVING FROM THE Ext.destroy on the next line
for (item in headerMenuListeners) {
headerMenuListeners[item].destroy();
}
this.callParent();
}
});
I have a checkbox group component and each checkbox value upon form submit is passed as a separate parameter like so:
mycheckboxgroup: val1
mycheckboxgroup:val2
mycheckboxgroup:val3
How can I instead submit all checkbox group values in a comma separated string?
mycheckboxgroup: val1, val2, val3
I tried using the getSubmitData method but that did not work. The values are still submitted in separate params.
Here is a snippet of my CheckBoxGroup class:
Ext.define("MyApp.view.form.field.CheckboxGroup",{
extend:"Ext.form.CheckboxGroup",
vertical:true,
columns:2,
getSubmitData:function(){
var fldNm = this.name;
return this.getValue()[fldNm].toString();
},
initComponent:function(){
.....
.....
this.callParent(arguments);
}
});
I am using Ext 6.0.2
Thanks
The problem is that your form, upon submission, will query the checkboxes, not the group as a whole.
You can, however, create a custom component with non-persistent checkboxes and a hidden field that aggregates the value. It may need some fine tuning, but something like this:
Ext.define("MyApp.ux.CheckboxGroup",{
extend:"Ext.form.CheckboxGroup",
xtype:'mycheckboxgroup',
initComponent:function() {
var me = this,
hf = Ext.widget({xtype:'hiddenfield',name:me.name});
me.callParent(arguments);
var checkboxes = me.query('checkbox'),
onChange = function(cb, nv) {
var arr = [];
Ext.each(checkboxes,function(item) {
if(item.checked) arr.push(item.inputValue);
});
hf.setValue(arr.join(', '));
};
Ext.each(checkboxes, function(item) {
console.log(item);
item.on('change',onChange);
item.submitValue = false; // do not submit the checkbox value
})
me.add(hf);
}
});
Relevant fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1mim
I am using ng-table in my application, I was looking to reset current page to 1 when user changes sort order. I gone through ng-table documentation, but no use.
You should be able to do this via the page() function of NgTableParams:
$scope.tableParams.page(1);
For that, you need to subscribe to the ngTableEventsChannel.afterReloadData(); that is fired after sorting changes. There's an example that logs the events and shows how to subscribe.
This works for me:
var vm = this;
vm.tableParams = new NgTableParams();
vm.recentPage = 1;
ngTableEventsChannel.onAfterDataSorted(function() {
vm.tableParams.page(1);
vm.tableParams.reload();
}, $scope, function(tableParams) {
var reset = tableParams._params.page !== 1 && vm.recentPage === tableParams._params.page;
vm.recentPage = tableParams._params.page;
return reset;
});
I am using ui-grid - v3.0.0-rc.22 - 2015-06-15.
It is configured to use external sorting, which works fine.
Now i have the requirement to change the sorted column from outside with a select box. On every change of the select box it fires external sorting and the data in the grid is updated correctly. It also updates the gridOptions.columnDefs: It sets the sort object of all columns except the correct one to undefined and updates the sorted column.
But there is one problem, the current sorted column indicator (in the column header) is not updated as it should be.
I tried using gridApi.core.notifyDataChange() with "options" or"column" as parameter value but it didn't work also.
How to update the sort-indicators in ui-grid programmatically?
Here is a part of the code triggered by the select box:
function updateSortColumn() {
if ($rootScope.QuickSearch.sortBy !== undefined) {
$scope.gridOptions.columnDefs.forEach(function (col) {
if (col.field === $rootScope.QuickSearch.sortBy) {
col.sort = {
direction: $rootScope.QuickSearch.sortOrder,
priority: 0
};
}
else
{
col.sort = undefined;
}
});
}
if($scope.gridApi !== undefined)
{
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS );
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
}
}
You could use the function "sortColumn" of the ui-grid, like this:
$scope.gridApi.grid.sortColumn(column, directionOrAdd, add)
here is the source code of this function : ui-grid source code
in your example it will give somthing like this :
function updateSortColumn() {
if ($rootScope.QuickSearch.sortBy !== undefined) {
$scope.gridOptions.columnDefs.forEach(function (col) {
if (col.field === $rootScope.QuickSearch.sortBy) {
$scope.gridApi.grid.sortColumn(col,$rootScope.QuickSearch.sortOrder);
}
});
}
}
$rootScope.QuickSearch.sortOrder must be in (uiGridConstants.ASC|uiGridConstants.DESC). You do not have to provide it.
I had the same problem -- the solution in my case was what Gho5t helpfully mentioned in a comment on another answer on this question.
I'm adding this response so the solution can have more visibility (alongside a more complete code example).
I needed a way to hook into the sort event on a grid and sort other grids on the page by the same column (they all have the same column definitions).
I was incorrectly passing the gridOptions.colDefinition object to the sortColumn() method and the column header sort indicator was not updating.
The grid.column object was what the sortColumn() method was looking for and caused things to work as expected.
// sortColumns is an array of column objects that gets passed in when a grid column is sorted (this code only considers the first sorted column)
// secondGridObj is an object defined elsewhere that has a reference to another grid's gridApi object
gridApi.core.on.sortChanged(null, function (grid, sortColumns) {
if (sortColumns.length) {
var sortDirection = (sortColumns[0].sort) ? sortColumns[0].sort.direction || uiGridConstants.ASC : uiGridConstants.ASC;
var matchingColumn = _.find(secondGridObj.gridApi.grid.columns, function (v2) { return v2.field === sortColumns[0].field; });
if (matchingColumn) {
secondGridObj.gridApi.grid.sortColumn(matchingColumn, sortDirection, false)
.then(function() {
secondGridObj.gridApi.grid.notifyDataChange(uiGridConstants.dataChange.COLUMN);
});
}
}
});
How do I reset my ExtJS filters in my grids. More specifically, how do I get the header to honour the changes to the filtering.
ie. This works fine :
grid.store.clearFilter();
But the header rendering is all wrong. I need to get into all the menu objects and unselect the checkboxes.
I am getting pretty lost. I am pretty sure this gives me the filterItems :
var filterItems = grid.filters.filters.items;
And from each of these filter items, i can get to menu items like so :
var menuItems = filter.menu.items;
But that's as far as I can get. I am expecting some kind of checkbox object inside menu items, and then I can uncheck that checkbox, and hopefully the header rendering will then change.
UPDATE :
I now have this code. The grid store has its filter cleared. Next I get the filterItems from grid.filters.filters.items and iterate over them. Then I call a function on each of the menu items.
grid.store.clearFilter();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(checkbox) {
if (checkbox.setChecked)
checkbox.setChecked(false, true);
});
}
The checkboxes do get called, but still nothing is happening :(
Try this code:
grid.filters.clearFilters();
This should take care of both the grid and its underlying store.
When you do
grid.store.clearFilter();
it can only clear the filters on the store but the grid's view doesn't get updated with that call. Hence to handle it automatically for both the grid's view as well as the grid's store, just use
grid.filters.clearFilters();
Hope it helps!
Cheers!
Your update help me but you forget the case where you have input text instead of checkbox.
So this is my addition of your solution:
grid.filters.clearFilters();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(element) {
if (element.setChecked) {
element.setChecked(false, true);
}
if(typeof element.getValue !== "undefined" && element.getValue() !== "") {
element.setValue("");
}
});
}
When you use grid wiht gridfilters plugin
and inovoke
grid.filters.clearFilters();
it reset applyed filters, but it don't clean value in textfield inside menu.
For clean textfield text you can try this:
grid.filters.clearFilters();
const plugin = grid.getPlugin('gridfilters');
let activeFilter;
if('activeFilterMenuItem' in plugin) {
activeFilter = plugin.activeFilterMenuItem.activeFilter
}
if (activeFilter && activeFilter.type === "string") {
activeFilter.setValue("");
}