Highlight grid row on edit - extjs

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'
});

Related

Concatenate in EditorGridPanel

Inside of my editorGridPanel, I have a three columns. I want to concatenate the data inside of my 'firstname' and 'lastname' column directly going to or when the cursor or focus are now in my 'email address' column in every row. Could someone help me about this problem?
var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [{
id: 'id',
header: 'ID',
dataIndex: 'id',
width: 220,
editable: false,
hidden: true
},
{
id: 'firstname',
header: 'First Name',
dataIndex: 'firstname',
width: 220,
editor: new fm.TextField({
allowBlank: false
}),
listeners: {
click: function(){
Ext.getCmp('b_save').enable();
Ext.getCmp('b_cancel').enable();
}
}
},
{
id: 'lastname',
header: 'Last Name',
dataIndex: 'lastname',
width: 220,
align: 'left',
editor: new fm.TextField({
allowBlank: false
}),
listeners: {
click: function(){
Ext.getCmp('b_save').enable();
Ext.getCmp('b_cancel').enable();
}
}
},
{
id: 'email_address',
header: 'Email Address',
dataIndex: 'email_address',
width: 330,
align: 'left',
editor: new fm.TextField({
allowBlank: false
}),
listeners: {
click: function(){
Ext.getCmp('b_save').enable();
Ext.getCmp('b_cancel').enable();
}
}
},
var grid = new Ext.grid.EditorGridPanel({
viewConfig: {
forceFit: true,
autoFill: true
},
id: 'maingrid',
store: store,
cm: cm,
width: 700,
anchor: '100%',
height: 700,
frame: true,
loadMask: true,
waitMsg: 'Loading...',
clicksToEdit: 2,
sm : new Ext.grid.RowSelectionModel({
singleSelect: true
,onEditorKey : function(field, e) {
if (e.getKey() == e.ENTER) {
var k = e.getKey(), newCell, g = this.grid,ed = g.activeEditor || g.lastActiveEditor;
e.stopEvent();
/*ed.completeEdit();*/
if(e.shiftKey){
newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
}else{
newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
}
if(newCell){
g.startEditing(newCell[0], newCell[1]);
}
}
else if(e.getKey() == e.TAB){
var k = e.getKey(), newCell, g = this.grid,ed = g.activeEditor || g.lastActiveEditor;
e.stopEvent();
newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
if(newCell){
g.startEditing(newCell[0], newCell[1]);
}
}
}
}),
});
You can add concatenated firstname and lastname and set it as value into your email_address field in listener for beforeedit editorgrid event:
listeners: {
beforeedit: function(e) {
if (e.field === 'email_address' && e.value === '') {
var newValue = e.record.get('firstname') + '.' + e.record.get('lastname');
e.record.set('email_address', newValue);
}
}
},
Fiddle with example: https://fiddle.sencha.com/#fiddle/3mf

How to achieve Live Search/Filtering on Multiple Fields in the Grid using Ext.Js?

I have done live search on grid. it is searching based on which column i mentioned filter code. But i need to filter grid records based on multiple column search. In below code only searches name column because mentioned only the name filed in filter code. I am not getting how to achieve multiple column value search? Can any one tell me how to achieve? great appreciated. Thank you .
Grid Code Here:
{
xtype: 'gridpanel',
flex: 2,
hidden: false,
store: store,
loadMask: true,
id: 'grid',
columns: [
{id:'id',header: 'ID', width: 100, sortable: true, dataIndex: 'id'},
{header: 'Name', width: 150, dataIndex: 'name'},
{header: 'Position', width: 150, dataIndex: 'position'},
{header: 'Ambition', width: 250, dataIndex: 'ambition'}
],
stripeRows: true,
title:'Straw Hats Crew',
},
liveSearch text change even Here:
onTextFieldChange: function(field, newValue, oldValue, options){
var grid = Ext.getCmp('grid');
if(newValue==''){
grid.store.clearFilter();
}
else {
grid.store.clearFilter();
grid.store.load().filter([
{id: 'name', property: "name", value: newValue, anyMatch: true}
]);
}
},
Something like this should work. You can specify an arbitrary filter function that can check all the fields in your model.
onTextFieldChange: function(field, newValue, oldValue, options){
var grid = Ext.getCmp('grid');
grid.store.clearFilter();
if (newValue) {
var matcher = new RegExp(Ext.String.escapeRegex(newValue), "i");
grid.store.filter({
filterFn: function(record) {
return matcher.test(record.get('id')) ||
matcher.test(record.get('name')) ||
matcher.test(record.get('position')) ||
matcher.test(record.get('ambition'));
}
});
}
}

Assigning values to a model dynamically

I gave it a try but it did not worked.
I am having two grids and a button. Initially the second grid will remain empty and the first grid will have some records.. When I select a few records in the first grid and click on the button, then the second grid should get populated with the only the selected rows of first grid.
Here is my code:
Ext.QuickTips.init();
var getLocalStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: Ext.grid.dummyData
});
};
var getSelectedStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'Company'
});
};
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid1 = Ext.create('Ext.grid.Panel', {
id: 'grid1',
store: getSelectedStore(),
columns: [
{text: "Company", width: 200, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: 'grid1'
});
var grid2 = Ext.create('Ext.grid.Panel', {
id: 'grid2',
store: getLocalStore(),
selModel: sm,
columns: [
{text: "Company", width: 200, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: 'grid'
});
Ext.widget('button', {
text: 'Click Me',
renderTo: 'btn',
listeners: {
click: function(this1, evnt, eOpts ){
var records = sm.getSelection();
getSelectedStore().loadData(records,true);
grid1.getView().refresh();
/*Ext.each(records, function (record) {
alert(record.get('company'));
});*/
}
}
});
Please let me what's going wrong.
First, you are defining the functions getSelectedStore and getLocalStore which return new store instances when invoked. That way in your click handler you would be grabbing an empty store each time! Lose the function bit and just set variables like this:
var storeToSelectFrom = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: someDataToChooseFrom
});
var storeToPutTo = Ext.create('Ext.data.ArrayStore', {
model: 'Company'
});
Then, define your grids using those variables as the stores:
var grid1 = Ext.create('Ext.grid.Panel',{
store: storeToSelectFrom,
selType: 'checkboxmodel'
// rest of your configs
});
var grid2 = Ext.create('Ext.grid.Panel',{
store: storeToPutTo
// rest of your configs
});
Then, create the button with a click handler:
Ext.widget('button', {
handler: function (button, event) {
var selected = grid1.getSelectionModel().getSelection();
grid2.getStore().add(selected);
}
// rest of your configs
});

How do I disable a control in an ExtJS grid?

I am using ExtJs 3.4. I have a checkbox control in an ExtJs Grid. I want to disable the checkbox control based on when a value in the store is equal to zero.
I have tried this and it does not disable it:
var colModel = new Ext.grid.ColumnModel(
{
columns: [
{ id: 'AircraftOid', header: "AircraftOid", width: 100, sortable: true, locked: true, dataIndex: 'AircraftOid', hidden: true },
{ id: 'nNumber', header: "N-#", width: 100, sortable: true, locked: true, dataIndex: 'NNumber' },
{ header: "Make", width: 150, sortable: true, dataIndex: 'Make' },
{ header: "Model", width: 150, sortable: true, dataIndex: 'Model' },
{ header: "Register",
width: 55,
sortable: true,
dataIndex: 'Register',
xtype: 'checkcolumn'
}
],
isCellEditable: function (col, row) {
return false;
}
});
var grid = new Ext.grid.GridPanel({
store: aircraftStore,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
height: 100,
split: true,
region: 'north'
});
Thanks in advance.
Your thought was right. But...
First, you're overriding column model's isCellEditable method to prevent editing. But Grid doesn't calls that method. It only works on EditorGrid.
Second, Ext.ux.grid.CheckColumn doesn't handle any editable features, because it's not an editor, it's just a column.
So for my project i modified it to act as a editor and added the readOnly property to prevent editing on normal Grids. If you set readOnly to true, it'll not be clickable anymore.
Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {
processEvent : function(name, e, grid, rowIndex, colIndex) {
if ( !this.readOnly && name == 'mousedown' ) {
grid.stopEditing();
var record = grid.store.getAt(rowIndex);
var cm = grid.getColumnModel();
var edit_e = {
grid: grid,
record: record,
field: this.dataIndex,
value: record.data[this.dataIndex],
row: rowIndex,
column: colIndex,
cancel: false
};
if ( grid.fireEvent( 'beforeedit', edit_e ) !== false && !edit_e.cancel ) {
record.set( this.dataIndex, !record.data[this.dataIndex] );
edit_e.cancel = null;
grid.fireEvent( 'afteredit', edit_e );
}
return false;
} else {
return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
}
},
editable : false,
readOnly : false,
renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0}"> </div>', v ? '-on' : '');
},
init: Ext.emptyFn
});
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;

How to get html button reference nested in a gridpanel in ExtJS

<table cellspacing="0" cellpadding="0" border="0" class="x-btn-wrap x-btn x-btn-text-icon" id="ext-comp-1169" style="width: auto;">
Profile
In this code, how can we get the reference to the button element?
In this particular case, Ext.getCmp('ext-comp-1169') would do the trick.
However, you should manually assign more sensible id values to components by using the id config option - otherwise you get auto-assigned ids.
This is the code I am using now.
function renderLinkBtn(val, p, record) {
var contentId = Ext.id();
createLinkButton.defer(1, this, [val, contentId, record]);
return('<div id="' + contentId + '"></div>');
};
function createLinkButton(value, id, record) {
var actnBtn = new Ext.Toolbar.SplitButton({
text: 'Action',
icon: '../images/icon-btn-action.png',
menu: new Ext.menu.Menu({
items: [
{text: 'Item 1'},
{text: 'Item 2'}
]
})
}).render(document.body, id);
}
var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel({
defaults: {
width: 20,
sortable: false
},
columns: [
{id:'id', header: "Link", renderer:renderLinkBtn, width: 25, align:'center', dataIndex:'id'},
{id:'company',header: "Company", width: 40, dataIndex: 'company'},
{header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", dataIndex: 'change'},
{header: "% Change", dataIndex: 'pctChange'},
{header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
}),
sm: new Ext.grid.RowSelectionModel({
singleSelect: false,
listeners: {
rowselect: function(sm, row, rec) {
//grid1.getView().refreshRow(rec)
/* var btnElement = Ext.getDom(contentIdArray[row].btnEl.id);
btnElement.disabled = true;
Ext.Msg.alert(btnElement);*/
},
rowdeselect:function(sm, row, rec) {
/* var btnElement = Ext.getDom(contentIdArray[row].btnEl.id);
btnElement.disabled = false;*/
}
}
}),
viewConfig: {
forceFit:true
},
width: 600,
height: 300,
animCollapse: false,
title: 'Grid Panel with Button Renderer',
iconCls: 'icon-grid',
renderTo: document.body
});
First you should get a reference to your button Component. This can be saved in your DOM structure somewhere or you can get a reference to it with Ext.getCmp('myId') if you know the ID of your component.
When you have the Component simply fetch it's Ext.Element and search down the dom tree for a element like this
var myButton = Ext.getCmp('ext-comp-1169');
var buttonElement = myButton.getEl().child('button');

Resources