here, i have some columns in a grid and i want to give default value in the 'receivedquantity' field and by default the received quantity filed will be equal to "Quantity" field.if user edits the field then data will come from the database.I am using mvc pattern here...
this.columns=
[
{
header:'name',
dataIndex:'name'},
{
header:'Quantity',
dataIndex:'quantity',
},
{
header:'Received Quantity',
dataIndex:'receivedquantity',
selectOnFocus: true,
filterable:true,
renderer:function(val, meta, record){
var receivedquantity = record.data.receivedquantity;
var quantity=record.data.quantity;
if(receivedquantity==0)//by default receivedquantity=0
{
//set (receivequantity=quantity) in the grid's received quantity cell
}},
editor: {allowBlank:false
}
}
];
renderer: function(val, meta, record){
if(val) return val;
return record.get('quantity');
}
Related
I have a pivot grid which display if the users have create,read,update,delete" permissions, the users are agrouped in this way departaments > estabilishments > sectors > users and i want the user to be able to edit this fields.
I already tried using with a renderer:
aggregate: [{
renderer: function(value, record, dataIndex, cell, column) {
var id = Ext.id();
Ext.defer(function() {
Ext.widget('checkbox', {
renderTo: id,
checked: value,
listeners: {
change: {
fn: function(event, target) {
//some function here
}
}
}
});
}, 100);
return Ext.String.format('<div id="{0}"></div>', id);
},
aggregator: 'aggCheckBoxR',
dataIndex: 'Incluir',
header: 'Incluir'
}]
and with a widget column:
aggregate: [{
aggregator: 'aggCheckBoxR',
column: {
xtype: 'widgetcolumn',
widget: {
xtype: 'checkbox',
listeners: {
change: function(cb) {
//some function here
}
}
}
},
dataIndex: 'Incluir',
header: 'Incluir'
}]
My Aggregator:
aggCheckBoxR: function(records, measure, matrix, rowGroupKey, colGroupKey) {
if (records.length > 1) {
let checkAllTrue = true;
for (var i = 0; i < records.length; i++) {
if (records[i].get('Incluir') === false || records[i].get('Incluir') === 0) {
checkAllTrue = false;
}
}
return checkAllTrue;
} else {
return records[0].get('Incluir');
}
}
The checkbox apears on the grid but my problem is the data "dont persist", whenever i expand or collapse a left axis on the pivot grid the value of the checkbox returns to its original value, how can i persist this data?
Already tried update the record manualy
change: function(cb) {
var nomeCmp = cb.getWidgetRecord().data._compactview_;
Ext.getStore('acesso.ColabStore').findRecord('Nome', nomeCmp).data.Incluir = true;
}
But still, it doestn't work.
EDIT: Had to change the column object event listener to:
{
xtype: 'widgetcolumn',
widget: {
xtype: 'checkbox',
listeners: {
afterrender: function(component, eOpts) {
console.log('after,render');
component.getEl().on('change', function(e, el) {
console.log('change func here');
})
}
}
}
}
With this, the change event is only fired when the users check a checkbox, and finally, I could use
norbeq's answer
You can update the record manually using:
record.set('Incluir',true);
and if you dont wan't to send changes to server:
record.commit();
We have a requirement to filter the contents of a grid using values/inputs that are not embedded into the UI Grid Column headers. The filtering must occur on the values that are displayed or in other word have been "filtered" for presentment. I have been able to successfully filter on values that don't have a cellFilter specified by specifying a filter method using the registerRowsProcessor.
$scope.externalFilterImpl = ( renderableRows ) => {
if($scope.externalFilterValues.name.length>0)
{
// Case insensitive matching
var matcher = new RegExp($scope.externalFilterValues.name, "i");
renderableRows.forEach( function( row ) {
var match = false;
debugger;
if ( row.entity["id"].match(matcher) ){
//var value = $scope.gridApi.grid.getCellDisplayValue(row, "id");
//if ( value.match(matcher) ){
match = true;
}
if ( !match ){
row.visible = false;
}
});
}
return renderableRows;
};
The code expects to filter on the display value (filtered value) for the column with the columnDef field property of "id". The columnDef for "id" appears as follows:
{
field: "id",
cellClass: "cellContent",
displayName: $translate.instant('tableHeading.item'),
enableColumnMenu: false,
enableHiding: false,
suppressRemoveSort: true,
filter: {
placeholder: "Enter a name search"
},
cellFilter: 'translateIds:"itemIds"',
filterCellFiltered:true,
sortCellFiltered:true,
sort: {
direction: uiGridConstants.ASC,
priority: 0,
},
cellTemplate: `<div class="ui-grid-cell-contents">
{{COL_FIELD CUSTOM_FILTERS}}
</div>`
}
Any assistance would be greatly appreciated.
TLDR: I'm using ExtJS 4 and I want to change action column buttons icon from hanlder / controller. How I can do it?
My problem: I have a menu to create a group of devices, it cointain a table of all existing devices (the device has an id, name and affiliation to the group member) with pagination and ajax store. To create a group I have to pass an array of device ids to the server.
To do this I add action column to my grid. By clicking on button in action column I want to add device id to one of the two arrays, that are stored as attributes of the grid (addedMembers and deletedMembers) and change icon in action column. At the moment, all the following code works, but I do not understand how I can change the icon?
Grid:
Ext.define('Portal.view.devicegroups.GroupDevicesGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.groupDevicesGrid',
addedMembers: [],
deletedMembers: [],
store: 'devicegroups.GroupDevicesStore',
columns: [
{
dataIndex: 'name',
flex: 1,
sortable: true,
text: Ext.String.capitalize("<?=gettext('name')?>")
},
{
xtype: 'actioncolumn',
text: Ext.String.capitalize("<?=gettext('member')?>"),
width: 75,
items: [
{
getClass: function (value, meta, record, rowIndex, colIndex) {
var cls = 'deny';
if (this.up('groupDevicesGrid').deletedMembers.indexOf(record.get('id')) !== -1 || record.get('member') == 1) {
cls = 'allow';
}
return cls;
},
handler: function (view, rowIndex, colIndex, item, event, record, row) {
this.fireEvent('changeMembership', rowIndex, record);
}
}
]
}
]
});
changeMembership method:
changeGroupDeviceMembership: function(rowIndex, device) {
var groupDevicesGrid = this.getGroupDevicesGrid(),
groupDevicesStore = groupDevicesGrid.getStore(),
addedMembers = groupDevicesGrid.addedMembers,
deletedMembers = groupDevicesGrid.deletedMembers,
deviceId = device.get('id'),
isMember = device.get('member');
if(isMember == 1) {
if(deviceId) {
if(deletedMembers.indexOf(deviceId) === -1) {
// Set allow icon
deletedMembers.push(deviceId);
} else {
// Set deny icon
deletedMembers.splice(deletedMembers.indexOf(deviceId), 1);
}
}
} else if(isMember == 0) {
if(deviceId) {
if(addedMembers.indexOf(deviceId) === -1) {
// Set deny icon
addedMembers.push(deviceId);
} else {
// Set allow icon
addedMembers.splice(deletedMembers.indexOf(deviceId), 1);
}
}
}
},
Or perhaps there is a better solution to my problem?
I am not privileged to comment so I will just take a shot at the answer. This is the way I do it..you are nearly there just add iconCls. :)
{
xtype: 'actioncolumn',
text: Ext.String.capitalize("<?=gettext('member')?>"),
width: 75,
items: [
{
iconCls:'deny', //<== try adding this icon cls
getClass: function (value, meta, record, rowIndex, colIndex) {
var cls = 'deny';
meta.tdAttr = 'data-qtip="Deny"'; //<== I like tool tips
if (this.up('groupDevicesGrid').deletedMembers.indexOf(record.get('id')) !== -1 || record.get('member') == 1) {
cls = 'allow';
meta.tdAttr = 'data-qtip="Allow"'; //<== I like tool tips
}
return cls;
},
handler: function (view, rowIndex, colIndex, item, event, record, row) {
this.fireEvent('changeMembership', rowIndex, record);
}
}
]
}
I use this pattern quite a lot, hopefully it works for you too.
I have a gridpanel with columns associated to its store (with "dataIndex") and columns not associated to store (without "dataIndex" ) for example:
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var data=record.getData(true);
if(data.currProbability!==undefined){
if(data.currProbability<5)
return 'L';
else
if((data.currProbability>4)&&(data.currProbability<7))
return 'M';
else return 'H';
}else
return "";
},
text: 'Probability'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var data=record.getData(true);
if(data.currSeverity!==undefined){
if(data.currSeverity>8)
return 'C';
else
if((data.currSeverity>6)&&(data.Severity<9))
return 'S';
else
if((data.currSeverity>4)&&(data.currSeverity<7))
return 'M';
else
return 'L';
}
return "";
},
text: 'Severity'
}
for these two columns I haven't problem with renderer But the third column:
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var row=view.getNode(rowIndex);
var data=record.getData(true);
if(row !==undefined){
var severity=Ext.fly(Ext.fly(row).query('.x-grid-cell')[25]).down('div').getHTML();
var probability= Ext.fly(Ext.fly(row).query('.x-grid-cell')[24]).down('div').getHTML();
if(data.status==='Closed')
return severity+probability+'c';
else
return severity+probability;
}
return "";
},
text: 'Risk Class'
}
with this column in its renderer I can't get the value of two later columns ("probability" and "severity") I understood this problem because I get values not from record but from two later columns not associated in the store here like a summury column, In the renderer for this column 'Risk Class' the variable row is indefined.
please how I can resolve it.
Thanx.
Use a calculated field on your model.
fields: [{
name: 'severity',
convert: function(v, record) {
var severity = record.get('currSeverity');
if (severity) {
if (severity > 8) {
return 'C';
}
// etc
}
return '';
}
}]
Then you can use it as a dataIndex directly in your grid. You can also ask the model for the value:
record.get('severity');
In an ExtJS GridPanel, is there a way to design a column whose sole purpose is to act as a serial number column? This column will not need a dataIndex property.
Right now, I am using a custom row numberer function, but this means the row numberer is defined in the grid.js file and all columns from grid.ui.js needs to be copied into grid.js.
I am using the Ext designer.
EDIT: The crux of my question is: Is there a way to define a row numberer using the Ext designer?
All you need is an Ext.grid.RowNumberer in your column definition.
var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Name", width: 80, sortable: true},
{header: "Code", width: 50, sortable: true},
{header: "Description", width: 200, sortable: true}
]);
Not an answer, but just want to share this:-
On top of the Ext.grid.RowNumberer, you can have this small nifty hack which will increments your numbers correctly according to the page number that you are viewing if you have implemented PagingToolbar in your grid.
Below is my working example. I extended the original Ext.grid.RowNumberer to avoid confliction.
Kore.ux.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer: function(v, p, record, rowIndex) {
if (this.rowspan) {
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
var st = record.store;
if (st.lastOptions.params && st.lastOptions.params.start != undefined && st.lastOptions.params.limit != undefined) {
var page = Math.floor(st.lastOptions.params.start/st.lastOptions.params.limit);
var limit = st.lastOptions.params.limit;
return limit*page + rowIndex+1;
}else{
return rowIndex+1;
}
}
});
And the code below is the original renderer from Ext.grid.RowNumberer, which, to me, pretty ugly because the numbers is fixed all the time no matter what page number it is.
renderer : function(v, p, record, rowIndex){
if(this.rowspan){
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
return rowIndex+1;
}
For version 4.2 very very easy:
Just add a new column like this:
{
xtype: 'rownumberer',
width: 40,
sortable: false,
locked: true
}
ExtJS 4.2.1 working code below:
// Row numberer correct increasing
Ext.override(Ext.grid.RowNumberer, {
renderer: function(v, p, record, rowIndex) {
if (this.rowspan) {
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
var st = record.store;
if (st.lastOptions.page != undefined && st.lastOptions.start != undefined && st.lastOptions.limit != undefined) {
var page = st.lastOptions.page - 1;
var limit = st.lastOptions.limit;
return limit*page + rowIndex+1;
} else {
return rowIndex+1;
}
}
});