Nested grid with rowExpander creating issues - extjs

I am using Extjs3.2 nested grid with rowExpander.
In my case everything working fine..
but whenever i click on nth row in child grid the parent grid's nth row is also getting selected.
How to Stop this...Please Help??
My Code
var expander = new Ext.ux.grid.RowExpander({
expandOnDblClick : false,
tpl : new Ext.Template('<div id="NestedGridRow-{id}"></div>'),
renderer: function(v, p, record) {
if (record.get('cmaStatus') == 'G') {
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander"></div>';
}
},
});
expander.on('expand', expandedRow);
function expandedRow(obj, record, body, rowIndex){
//absId parameter for the http request to get the absence details.
//Use Id to give each grid a unique identifier. The Id is used in the row expander tpl.
//and in the grid.render("ID") method.
var row = "NestedGridRow-" + record.get("id");
var id2 = "mygrid-" +record.get("id");
sapid_para = record.get('sapid');
//Create the nested grid.
var gridX = new Ext.grid.GridPanel({
id:'nestedGrid',
store: storenested,
//stripeRows: true,
columns: [
{
header : "CMA Date",
width : 120,
sortable : true,
dataIndex : 'cmaDate',
},
{
header : "Source Model",
width : 120,
sortable : true,
dataIndex : 'sourceModel',
},
{
header : "Remarks",
width : 390,
sortable : true,
dataIndex : 'remarks',
}],
height: 120,
id: id2,
plugins : [editor],
renderTo: row,
stripeRows:true,
listeners: {
render: function(gridX) {
gridX.getView().el.select('.x-grid3-header').setStyle('display', 'none');
},
rowclick : function(grid,rowIndex,e) {
alert(rowIndex);
}
},
});
gridX.render(row);
//Ext.getCmp('grid_lineage').getStore().load({params:{start:0, limit:10}});
storenested.load({params:{start:0, limit:10}});

Do you have the same instance of rowSelectionModel on both grids?
EDIT:
Try to add to both of grids definition:
selModel: new Ext.grid.RowSelectionModel({singeSelect:true}),

Related

EXTJS 4.2 grid get column header name on cell click with custom multi cell selection model

I have already tried grid.getColumnModel().getColumnHeader(columnIndex); but this doesn't work. I am using a custom grid selection model.I want to get column header value whenever any cell in corresponding column is clicked
You need to add cellClick listener to the panel, here is the modified code
var grid1 = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: store,
width:0.3*Ext.getBody().getViewSize().width,
height: 0.5*Ext.getBody().getViewSize().height,
columnLines: true,
columns: [{
text : 'Company',
locked : true,
sortable : false,
dataIndex: 'company',
renderer : function (value, metaData, record, row, col, store,gridView) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}
},{
text : 'Price',
width : 125,
locked:true,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
},{
text : 'Change',
width : 555,
sortable : true,
dataIndex: 'change',
renderer : function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}
},{
text : '% Change',
width : 555,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange',
},{
text : 'Last Updated',
width : 555,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
title: 'Locking Grid Column',
selType: 'cellmodel',
selModel: Ext.create('MyApp.MultiCellSelectionModel',{
mode: 'MULTI',
allowDeselect: true
}),
multiSelect: true,
listeners : {
cellclick( grid, cell, columnIndex, record , node , rowIndex , evt){
var cellId = grid.getHeaderCt().getHeaderAtIndex(columnIndex).id;
var dataIndex = grid.getHeaderCt().getHeaderAtIndex(columnIndex).dataIndex;
var text = grid.getHeaderCt().getHeaderAtIndex(columnIndex).text;
alert(dataIndex);
alert(text);
}
}
});

Extjs 4.2: Getting the selected cell value in grid panel

I want to get the value of the selected cell in my grid. I have the following codes:
methods:
createPlaylist: function(record){
var scope = this;
var srecords
= getShowImages.getSelectionModel().getSelection();
console.log(srecords);
}
I use the console.log to check if I am getting any value.
grid view:
Ext.ns('dlti.view.widget');
Ext.define('dlti.view.widget.ShowImages' ,{
extend: 'Ext.grid.Panel',
id: 'dlti-grid-images',
alias: 'widget.ShowImages',
forceFit: true,
stripeRows: true,
selType: 'checkboxmodel',
multiSelect: true,
autosync: true,
height: 250,
width: 470,
store: new dlti.store.UploadStore(),
columns: [
{
text: 'Images',
dataIndex: 'imagepath',
renderer: function renderIcon(val) {
return '<img src="' + val + '"width="100px" height="100px" align="middle">';
},
},
{
text: 'Filename',
dataIndex: 'filename',
renderer: function renderDescTarget(val, p, record) {
var desc = '';
desc = '<p style="color:#000;font-size:12px;">' + val + '</p>';
return desc;
}
}
]
});
You need to add a Select listener such as;
selModel: Ext.create('Ext.selection.CellModel', {
allowDeselect: true,
mode: 'SINGLE',
listeners: {
select: {
fn: me.onCellModelSelect,
scope: me
}
}
})
Following that, the function to alert the value of the cell should be something like follows;
onCellModelSelect: function(cellmodel, record, row, column, eOpts) {
/*an if statement is required to parse the column chosen as
record.get() only accepts string values of the column name so
if the columns are named "first", "second", "third", the
following if statement applies*/
var columnName;
if(column === 0){
columnName= 'first';
}else if(column === 1){
columnName= 'Second';
}else if(column === 2){
columnName= 'Third';
}
Ext.Msg.alert('Cell Value',record.get(columnName));
}
});
Hope it works for you. If you want me to send you the whole page of code for this, PM me! <3
You have to listen to gridpanel's cellclick event. In your view, you have to add the following on your gridpanel's config:
listeners : {
cellclick : function(view, cell, cellIndex, record, row, rowIndex, e) {
//handle event
}
}
The grid has a cellclick event you can use:
Fired when table cell is clicked.
EDIT:
In your grid you can add a listener that will be fired each time a cell is clicked (you can add it to the controller instead), like:
listeners : {
cellclick : function(view, cell, cellIndex, record, row, rowIndex, e) {
console.log(cell);
}
}

How to focus on editable textfield when checkbox is checked in ExtJS Grid?

I am creating a grid with checkcolumn and celledit. I have 3 columns 1 is for checkboxes and other is editable text field and 3rd is the productname, using celledit to edit the price.
When I will check a checkbox on a record the focus should be on the textfield for that particular record.
Here is the code sample:
Ext.define('MyApp.view.EntryPage',
{
extend : 'Ext.grid.Panel',
alias : 'widget.entryPage',
title : 'Product Price Entry',
store : 'ProductStore',
loadMask: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1})],
initComponent:function(){
var me = this;
this.selModel = {xtype:'cellmodel'},
this.columns = {
defaults:{sortable : true,hideable : true,menuDisabled : true,align : 'left',style : 'text-align:left'},
items:[
{
xtype: 'checkcolumn',
header: 'Check Me',
dataIndex : 'active',
listeners:{
checkchange : function( CheckColumn, rowIndex, checked, eOpts ){
// Select the textfield
}}
},
{
text : 'Price',
flex:0.75,
sortable : false,
hideable : false,
dataIndex : 'unitprice',
editor: 'textfield'
},
{
text : 'Product Name',
flex:2,
dataIndex : 'pname'
}
]};
//this.features = [];
this.callParent(arguments);
}
});
With the help of listener(use edit event), if it has been checked, get the reference of record and apply focus() method.
Refer below link for reference.
http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.grid.plugin.CellEditing-event-edit
see the edit event in the above link.
Thanks
I solved this as follows:
checkchange : function( CheckColumn, rowIndex, checked, eOpts ){
//me.getPlugin('cellplugin').startEdit(record,1);
me.getPlugin('cellplugin').startEditByPosition({row: rowIndex, column: 1});
}}
This worked.... Hariharan thanks for your answer!!

extjs4 row styling

I have conditional styling on grid rows, styling works initially but it does not respond to data change. Lets say if you edit a column to be a minus value lets say then I want its style change back to red.
I tried
grid.doLayout();
grid.doComponentLayout();
grid.update();
grid.updateLayout()
so how I can enforce grid to update the css on the row (how do I trigger getRowClass, or is there any other way of doing this).
What you are trying to do will only be possible if you run reconfigure with the same columnmodel on the grid. override the getRowClass property of the view cause the grid.Panel itself has none.
gridReference.getView().getRowClass = function(record, rowIndex, rowParams, store){
// your code
}
See the JSFiddle example for this
Alternatively you may use the renderer
Use the renderer but this time you change the meta data of the cell by adding a class. This can be done by modifing the second param of the renderer which is a meta-object like so:
var classRenderer = function(v,m) {
if (v=='Lisa') {
m.tdCls = 'demo'
}
return v;
}
here'S a JSFiddle in addition
You can use the renderer config for the column...
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
collapsible: true,
multiSelect: true,
stateId: 'stateGrid',
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
height: 350,
width: 600,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true,
enableTextSelection: true
}
});

Editing a line in an ExtJs grid

Hello, I'm developing a project using Ext Js that needs to edit a line in a grid. I'm trying to use a plugin I found in Ext's documentation, plugins: [Ext.create ('Ext.grid.plugin.RowEditing')] but when I click on the line, update and cancel options appear on the grid, but the cell is not editable, does anyone know what's going on?
The example in the documentation with the plugin is this: http://docs.sencha.com/ext-js/4-0/#!/example/restful/restful.html
My code so far:
Ext.define('GridEditavel',{
extend : 'Ext.grid.Panel',
title: 'Grid Editavel',
store: 'GridStore',
dockedItems : [ {
xtype : 'toolbar',
items : [ {
xtype: 'button',
text : i18n['vds.botao.nova.coluna'],
icon : Webapp.icon('add1.png'),
iconAlign : 'top',
handler : function() {
var gridView = Ext.ComponentQuery.query("gridpanel")[1];
Ext.Msg.prompt('Message', 'Enter a column number:', function(
btn, text) {
if (btn == 'ok' && text != null) {
var column = Ext.create('Ext.grid.column.Column', {
text : text
});
gridView.headerCt.insert(gridView.columns.length,
column);
gridView.getView().refresh();
} else {
Ext.Msg.alert('Alert', 'Enter a column number!');
}
});
}
} ]
} ],
columns: [{
header : 'Nome',
dataIndex : 'nome',
flex : 0.8
}],
plugins : [ Ext.create('Ext.grid.plugin.RowEditing') ]});
You need to set the editor property in the columns. Example:
columns:[{
header:'Nome',
dataIndex:'nome',
flex:0.8,
editor:'textfield'
}]
You can also use a config object for the editor, like this:
columns:[{
header:'Nome',
dataIndex:'nome',
flex:0.8,
editor:{
xtype:'combo',
store:'somestore'
}
}]

Resources