I have grid panel, its having check all options. But I'm stuck on the selected dataIndex which having value = 'N'. There is Y or N. If some rows having value N, it must not check when I click check all. I had already make validation on it. it's work. But I want also the uncheck is appear when i click check all if it's value is 'N'. This is my code
var sm;
sm = Ext.create('Ext.selection.CheckboxModel');
gridMain = Ext.create('Ext.grid.Panel', {
id: 'gridMyapproval',
renderTo: Ext.get("sa-grid"),
store: 'myapproval-store',
selModel: sm,
height: mainContentHeight - 63, //480//mainContentHeight-138,
//title: 'Request',
columns: [{
text: 'Request Type',
width: 100,
dataIndex: 'WorkflowType'
}, {
text: 'Requestor ID',
width: 100,
dataIndex: 'RequestedByID'
}, {
text: 'Requestor Name',
width: 200,
dataIndex: 'RequestedByName'
}, {
text: 'Description',
flex: 1,
dataIndex: 'RequestDescription'
}, {
text: 'Status',
width: 150,
dataIndex: 'RequestStatusDescription'
},
{
text: 'EnableApprove',
width: 150,
dataIndex: 'EnableApprove'
},
],
dockedItems: [{
xtype: 'toolbar',
items: [actApproveAll]
}],
listeners: {
itemdblclick: function (view, record, item, index, e, eOpts) {
isGridClicked = true;
ViewDetails(FormState.VIEW);
},
afterrender: function (row, model, index) {
//$('.x-column-header-checkbox').css('display','none');
if (model.data.EnableApprove == 'N') {
grid.getSelectionModel().deselect();
}
},
selectionchange: function (row, model, index) {
if (model.data.EnableApprove == 'N') {
grid.getSelectionModel().deselect();
}
},
beforeselect: function (row, model, index) {
if (model.data.EnableApprove == 'N') {
MsgBox("Enable Approve !");
return false;
}
}
}
});
I tried to write it on afterrenderer, but it's not work.
I think you have to overrite selectAll (source) and deselectAll (source) methods of Ext.selection.CheckboxModelView.
Check this question and answer, I guess solution is somewhat you need.
Related
I have a popup in which I have a dropdown. When I change the value of the dropdown to some other value it shows the orange triangle of the dirty check, but if I change the value of the drop down back to the previous value, the dirty check mark is still shown.
If the value is changed back to the original value in the dropdown, I want the dropdown to not show the dirty check mark.
Sharing my code
columns: {
defaults: {
align: 'left',
flex: 2
},
items: [{
xtype: 'actioncolumn',
localized: {
text: 'commonTranslations.function'
},
items: [{
iconCls: 'iwp-icon-gen_edit',
handler: 'onEditClick',
getTip: function() {
return I18n.get('commonIconTranslations.penReleaseConcepts')
}
}],
align: 'center',
flex: 1
},
{
localized: {
text: 'commonTranslations.description'
},
dataIndex: 'title',
renderer: CommonRendererUtils.htmlEncode
},
{
localized: {
text: 'commonTranslations.fileName'
},
dataIndex: 'filename',
renderer: CommonRendererUtils.htmlEncode
},
{
xtype: 'actioncolumn',
localized: {
text: 'commonTranslations.file'
},
items: [{
getClass: function(v, metadata, r) {
if (!r.get('filename')) {
return 'x-hidden'
} else {
return 'iwp-icon-zeb_folder'
}
},
getTip: function() {
return I18n.get('commonIconTranslations.halfOpenFolder')
},
handler: 'onDownloadClick'
}],
align: 'center',
flex: 1
},
{
localized: {
text: 'commonTranslations.source'
},
dataIndex: 'source',
flex: 1
},
{
localized: {
text: 'details.tabview.scope.contents.release.main.uploadDate'
},
dataIndex: 'changeDate',
xtype: 'dynamicTimestampColumn'
},
{
localized: {
text: 'details.tabview.scope.contents.release.main.uploadBy'
},
dataIndex: 'changeUser',
xtype: 'usercolumn'
},
{
localized: {
text: 'commonTranslations.status'
},
/*-----facing issue for the column*/
dataIndex: 'status',
renderer: function(value) {
return value.germanDescription;
}
},
{
localized: {
text: 'commonTranslations.changeReason'
},
dataIndex: 'changeReason',
renderer: CommonRendererUtils.htmlEncode
},
{
localized: {
text: 'commonTranslations.modulOrg'
},
dataIndex: 'modulOrgs',
renderer: function(value, metaData, record) {
if (record.isModified(metaData.column.dataIndex)) {
console.log("modified 9999999" + record.isModified(metaData.column.dataIndex));
metaData.tdCls += 'x-grid-dirty-cell';
}
var formattedValue = "";
if (value) {
value.forEach(function(modulOrg) {
formattedValue += modulOrg.modulOrg + ", ";
});
}
return formattedValue.substring(0, formattedValue.length - 2);
},
flex: 1
},
{
localized: {
text: 'details.tabview.scope.contents.release.main.historyIndex'
},
dataIndex: 'historyIndex',
flex: 1
}
]
}
I think you have too much code for this. Anyways there is a change event listener that you can add to your dropdown as follows:
listeners:{
change:'combochange'
}
Now you can write this combochange function inside your controller or you can defined this function inside your view only.
combochange:function(field,newValue,oldValue,e){
// Inside this function you will get both the values of the dropdown of
yours where newValue is the value currently selected and oldValue is the
previous value. So inside this function according to your conditions you
can put a check that if the old and newvalue matches then not to show the
orange triangle.
}
Let me know if any issue. Happy Learning :)
My checkbox column:
{
xtype: 'widgetcolumn',
text: 'Selection',
tdCls: 'actions',
header: 'Selection',
width: '5%',
dataIndex: 'selection',
widget: {
xtype: 'checkbox',
defaultBindProperty: 'disabled',
listeners: {
afterrender: function (chb) {
var rec = chb.getWidgetRecord();
chb.setValue(rec.get('selection'));
chb.on('change', this.checkHandler);
chb.setDisabled(rec.get('selection_disabled'));
},
scope: this
}
}
}
How get checkbox in cellclick grid event for set value proggramatically? In cellclick me need change value of checkbox(cbox.setValue(!cbox.getValue()); or the same).
Not sure if it is best solution, but you can do something like this:
{
xtype: 'widgetcolumn',
dataIndex: 'checked',
flex: 1,
text: 'Checked',
widget: {
xtype: 'checkbox'
},
onWidgetAttach: function(column, widget, record) {
// Make sure your property / id pair is unique
// You can use Ext.id() to generate id for your record and widget
widget.widgetId = record.get('id');
}
}
and
grid.on('cellclick', function(view, td, cellIndex, record) {
var rowWidget = Ext.ComponentQuery.query('checkbox[widgetId=' + record.get('id') + ']')[0];
if(rowWidget) {
rowWidget.setValue(!rowWidget.getValue());
}
});
Working fiddle
I am very new to extjs, and I saw this excellent post:
dynamic url inside a extjs table dont work
I was wondering if there is a way to enable checkbox functionality on the subtable?
I tried making slight modifications to the sample, but I can't find a way to have the checkboxes clickable and capture the events associated with it.
Please see the modified code below. Is it possible to have a clickable checkbox inside a Subtable?
Thanks in advance!
// SALVAGUARDAS -- added Approved field
Ext.define('Salvaguardas', {
extend: 'Ext.data.Model',
fields: ['Approved', 'id_amenaza', 'tipo', 'modo', 'codigo', 'denominacion', 'eficiencia', ]
});
//SALVAGUARDAS
var salvaguardaStore = Ext.create('Ext.data.Store', {
model: 'Salvaguardas',
data: [
{Approved: true, id_amenaza: 1, tipo: 'Correctiva', modo: 'Correctiva', codigo: 'corr-01', denominacion: 'correctiva 1', eficiencia: 'MB' }
]
});
//GRIDPANEL
Ext.create('Ext.grid.Panel', {
renderTo: 'example-grid',
store: amenazaStore,
//width: 748,
//height: 598,
title: '<bean:write name="informesAGRForm" property="nombreActivo"/>',
plugins: [{
ptype: "subtable",
headerWidth: 24,
listeners: {
'rowdblclick': function(grid, rowIndex, columnIndex, e){
// Get the Record, this is the point at which rowIndex references a
// record's index in the grid's store.
var record = grid.getStore().getAt(rowIndex);
// Get field name
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
var data = record.get(fieldName);
alert(data);
}
},
columns: [{
//text: 'Approved',
//dataIndex: 'Approved',
//hidden: true,
//width: 100
xtype: 'checkcolumn',
header: 'Approved',
dataIndex: 'Approved',
width: 85,
listeners: {
checkChange: function ()
{
console.log('checkChange');
}
}
}, {
text: 'id_amenaza',
dataIndex: 'id_amenaza',
hidden: true,
width: 100
}, {
width: 100,
text: 'id_salvaguarda',
dataIndex: 'id_salvaguarda'
},
{
text: 'denominacion',
dataIndex: 'denominacion',
width: 100
},{
text: 'descripcion',
dataIndex: 'descripcion',
width: 100
},{
text: 'eficacia',
dataIndex: 'eficacia',
width: 100
},
],
getAssociatedRecords: function (record) {
var result = Ext.Array.filter(
salvaguardaStore.data.items,
function (r) {
return r.get('id_amenaza') == record.get('id');
});
return result;
}
}],
listeners: {
rowdblclick: function (view, record, tr, columnIndex, e) {
console.log('rowdblclick');
var cell = e.getTarget('.x-grid-subtable-cell');
if (!cell) {
return;
}
var row = Ext.get(cell).up('tr');
var tbody = row.up('tbody');
var rowIdx = tbody.query('tr', true).indexOf(row.dom);
//var records = view.up('grid').getPlugin('subtable').getAssociatedRecords(record);
var records = view.up('grid').plugins[0].getAssociatedRecords(record);
var subRecord = records[rowIdx];
console.log('rowdblclick: ' + rowIdx + ' - ' + subRecord);
},
rowclick: function (view, record, tr, columnIndex, e) {
console.log('rowclick');
var cell = e.getTarget('.x-grid-subtable-cell');
if (!cell) {
return;
}
var row = Ext.get(cell).up('tr');
var tbody = row.up('tbody');
var rowIdx = tbody.query('tr', true).indexOf(row.dom);
//var records = view.up('grid').getPlugin('subtable').getAssociatedRecords(record);
var records = view.up('grid').plugins[0].getAssociatedRecords(record);
var subRecord = records[rowIdx];
console.log('rowclick: ' + rowIdx + ' - ' + subRecord);
}
},
collapsible: false,
animCollapse: false,
columns: [
{
text: 'ID',
hidden: true,
hideable: false,
dataIndex: 'id'
},
{
text: 'Codigo',
width: 50,
sortable: true,
hideable: false,
dataIndex: 'codigo'
},
{
text: 'DenominaciĆ³n',
width: 150,
dataIndex: 'denominacion',
},
{
text: ' Autenticidad',
flex: 1,
dataIndex: 'a_riesgo'
},
{
text: 'Confidencialidad',
flex: 1,
dataIndex: 'c_riesgo'
},
{
text: 'Integridad',
flex: 1,
dataIndex: 'i_riesgo'
},
{
text: 'Disponibilidad',
flex: 1,
dataIndex: 'd_riesgo'
},
{
text: 'Trazabilidad',
flex: 1,
dataIndex: 't_riesgo'
},
{
text: 'Total',
flex: 1,
dataIndex: 'total_riesgo'
}]
});
I am on ExtJs3.2.
There is a gridpanel with a column having a textField as an editor.
On change of value in the textfield - i need the corresponding row to be highlighted.
How do I get the 'owning' row index of the text field?
columns: [
...........
{header: 'Revenues',dataIndex: 'percentage',
editor: new Ext.form.TextField({
listeners: {
'change' : function (field, newValue, oldValue) {
if(oldValue!=newValue){
.......
//How do I get the row index?
Ext.fly(grid.getView().getRow(row)).addClass('yellow-row');
}
}
}
Is there any other way to achieve this?
Could you please try below?
var grid = Ext.grid.GridPanel({
store: yourStore,
id: 'myGrid',
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'Company', header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Change', dataIndex: 'change'},
{
header: 'Revenue',
dataIndex: 'percentage',
editor: new Ext.form.TextField({
listeners: {
'change': function(field, newValue, oldValue) {
if (oldValue != newValue) {
var sel = Ext.getCmp('myGrid').getSelectionModel().getSelected();
// if you select more than one record use getSelections instead of getSelected
console.log(sel);
}
}
}
})
}
]
}),
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
width: 500,
height: 300,
frame: true,
title: 'My Grid'
});
I have a grid with two summary positions. I have a summary at the end of the grid. This is working great. But what I want is to calculate the total price per row. I have 4 columns called 'Aantal, Stukprijs,korting and Totaal'. What I need is that in the 'Totaal' column this sum: (Aantal X Stukprijs) - %korting(means discount).
This is the code for that grid:
xtype: 'gridpanel',
id: 'materiaalGrid',
autoScroll: true,
forceFit: true,
store: 'MyArrayStore8',
columns: [
{
xtype: 'rownumberer'
},
{
xtype: 'gridcolumn',
dataIndex: 'naam',
text: 'Naam',
editor: {
xtype: 'combobox'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'type',
text: 'Type'
},
{
xtype: 'numbercolumn',
summaryType: 'sum',
dataIndex: 'gewicht',
text: 'Gewicht'
},
{
xtype: 'numbercolumn',
summaryType: 'sum',
dataIndex: 'aantal',
text: 'Aantal',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'numbercolumn',
dataIndex: 'stuks',
text: 'Stukprijs'
},
{
xtype: 'numbercolumn',
dataIndex: 'korting',
text: 'Korting',
editor: {
xtype: 'numberfield',
maxValue: 100
}
},
{
xtype: 'numbercolumn',
summaryType: 'sum',
dataIndex: 'stuks',
text: 'Totaal'
},
{
xtype: 'booleancolumn',
dataIndex: 'verkoop',
text: 'Verkoop'
},
{
xtype: 'actioncolumn',
maxWidth: 50,
minWidth: 50,
width: 50,
defaultWidth: 50,
emptyCellText: 'Delete',
menuDisabled: true,
items: [
{
handler: function(view, rowIndex, colIndex, item, e, record, row) {
var selection = me.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
},
altText: 'Delete'
}
]
}
],
viewConfig: {
enableTextSelection: false
},
features: [
{
ftype: 'summary'
}
],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
})
],
I can only get the sum of aantal and gewicht in the bottom row.
To solve this specific scenario you can try doing this:
For the result of "Aantal X Stukprijs" AKA Quantity X Unit price (thanks God Google translator exists!) you can create a calculated field implementing the convert function on the field declaration, as follows:
{
name: 'total',
type: 'number',
convert: function(value, record) {
if(!value) {
// Only calculate the value if no value set since the
// Calculated total column will fill this field with a real
// value we don't want to mess
value = record.get('price') * record.get('units');
}
return value;
}
}
This will still leave inconsistencies when changing the record value using the inline editor you will need to add an extra handler for that like this:
grid.on('edit', function(editor, e) {
// commit the changes right after editing finished
e.record.set('total'); // force total re-calculation
e.record.commit();
});
You con see a complete example here, hope it helps.