Develop Reference

How to add a style to a particular column in EXTjs Editor Grid Panel which has column vars?

/*
Need to have pointer cursor only on the particular column instead for whole grid or the row.
*/
this.testRenderer = function(v, m, r, ri, ci, ds) {
var total = formatMoney(r.data["total"], cur);
return total;
};
var columnsVar = [
{
header: getMsg('test', 'testp'),
dataIndex: 'test.name',
sortable: true
},
{
header: getMsg('test', 'testtotal'),
sortable: true,
dataIndex: 'total',
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 48
}),
render:this. testRenderer
}, {
header: getMsg('test', 'active'),
sortable: true,
dataIndex: 'test.Status'
}
];
this.testGrid = new Ext.grid.EditorGridPanel({
title:getMsg('test','Details'),
flex: 3,
cls: 'cnqr-shuttle-grid',
border: false,
header: true,
clicksToEdit: 1,
enableHdMenu: false,
enableColumnHide: false,
enableColumnMove: false,
autoHeight: true,
viewConfig: {
getRowClass : function(record, rowIndex, p, store) {
p.tstyle = ' cursor: pointer;'
},
forceFit: true,
scrollOffset: 0 // the grid will never have scrollbars
},
tbar: new Ext.Toolbar({
ctCls: 'grayButtonToolBar border-toolbar'
}),
store: store1,
selModel: new Ext.grid.RowSelectionModel(),
columns: columnsVar
});
//testGrid is the Ext editor grid and column vars has 3 columns and I need have pointer cursor only on the 2nd column testtotal col. Have tried adding code at the testRenderer and did not work.

On the column you want the pointer on, add the following:
renderer: function(value, metadata) {
metadata.tdCls = 'pointer-only';
return value;
}
And in your CSS add the class:
.pointer-only {
cursor: pointer;
}
Here's a fiddle illustrating this on the last column of a simple grid

renderer: function (value, metadata) {
metadata.style = 'cursor: pointer;';
return value;
}

Rows hidden in a grid JS EXT

I need to simply add a function in my grid that hide the rows when the user makes the first access. After that, by the icon of minimize/expand that already appears in my grid, the user can expand the group and see the rows. My code is that:
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
hideHeaders: true,
features: [groupingFeature],
columns: [
{text: "Questions",groupable: false, flex: 1, dataIndex: 'species', sortable: true}
],
width: 250,
height:260,
split: true,
region: 'west'
});
// define a template to use for the detail view
var bookTplMarkup = [
'{resposta}<br/>'
];
var bookTp1 = Ext.create('Ext.Template', bookTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
width: 720,
height: 570,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
autoScroll: true,
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Select one option'
}]
});
Where I add the nedded functions?

I guess the startCollapsed property of grouping feature is what your looking for:
{ ftype:'grouping', startCollapsed: true }

Extjs 3.3.1 FieldSet with layout fit and grid in it does not resize the grid on window resize

var colModel = new Ext.grid.ColumnModel({
columns: [ columns here...]
})
var grid = new Ext.Ext.grid.GridPanel({
store: store,
loadMask: true,
autoExpandColumn: 'itemDescription',
stripeRows: true,
colModel: colModel
})
var form = new Ext.FormPanel({
labelWidth: 150,
bodyStyle: 'padding:2px 5px;',
autoScroll: true,
items:[
new Ext.form.FieldSet({
layout: 'fit',
collapsible: true,
height:300,
items: [
grid
]
}
]
})
The grid does not change its width once the window gets resized...
Any thoughts???

Your Grid will resize according to the FieldSet due to layout: 'fit'. Since the FormPanel doesn't have a layout set, it automatically uses layout: 'form'. The FieldSet will act as a normal Form Field and thus needs to be configured to resize it self. This can be done using the anchor property of the FormLayout:
var form = new Ext.FormPanel({
labelWidth: 150,
bodyStyle: 'padding:2px 5px;',
autoScroll: true,
items:[
new Ext.form.FieldSet({
layout: 'fit',
anchor: '-0',
collapsible: true,
height:300,
items: [
grid
]
}
]
});
This will tell the FieldSet to always stay 0 pixels from the right edge of the FormPanel.

try this.....
var colModel = new Ext.grid.ColumnModel({
columns: [ columns here...]
})
var grid = new Ext.Ext.grid.GridPanel({
store: store,
loadMask: true,
autoExpandColumn: 'itemDescription',
stripeRows: true,
colModel: colModel
})
var form = new Ext.FormPanel({
labelWidth: 150,
bodyStyle: 'padding:2px 5px;',
autoScroll: true,
items : {
xtype : 'fieldset',
title : 'Give proper Title',
defaults: {
anchor: '100%'
},
layout: 'anchor',
collapsible: true,
items: grid
}
});

Get Grid Cell Value on Hover in ExtJS4

I have the following code in a grid:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Job ID',
width : 75,
sortable : true,
dataIndex: 'id'
},
{
text : 'File Name',
width : 75,
sortable : true,
dataIndex: 'filename',
listeners : {
'mouseover' : function(iView, iCellEl,
iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {
var zRec = iView.getRecord(iRowEl);
alert(zRec.data.id);
}
}
...etc...
I can't figure out how to get the cell value of the first column in the row. I've also tried:
var record = grid.getStore().getAt(iRowIdx); // Get the Record
alert(iView.getRecord().get('id'));
Any ideas?
Thanks in advance!

It's easier than what you have.
Look at the Company column config here for an example-
http://jsfiddle.net/qr2BJ/4580/
Edit:
Part of grid definition code:
....
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
renderer : function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + record.get('price') + ' is the price of ' + value + '"';
return value;
}
},
....

You can add a handler instead of a listener.
{
header: 'DETAILS',
xtype:'actioncolumn',
align:'center',
width: 70,
sortable: false,
items: [
{
icon: '/icons/details_icon.png', // Use a URL in the icon config
tooltip: 'Show Details',
handler: function(grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex);
}

ExtJS GridPanel width

I'm using Ext JS 2.3.0 and have created the search dialog shown below.
The search results are shown in a GridPanel with a single Name column, but notice that this column does not stretch to fill all the available horizontal space. However, after I perform a search, the column resizes properly (even if no results are returned):
How can I make the column display correctly when it's shown initially? The relevant code is shown below:
FV.FindEntityDialog = Ext.extend(Ext.util.Observable, {
constructor: function() {
var queryTextField = new Ext.form.TextField({
hideLabel: true,
width: 275,
colspan: 2,
});
var self = this;
// the search query panel
var entitySearchForm = new Ext.form.FormPanel({
width: '100%',
frame: true,
layout:'table',
layoutConfig: {columns: 3},
items: [
queryTextField,
{
xtype: 'button',
text: locale["dialogSearch.button.search"],
handler: function() {
var queryString = queryTextField.getValue();
self._doSearch(queryString);
}
}
]
});
// the search results model and view
this._searchResultsStore = new Ext.data.SimpleStore({
data: [],
fields: ['name']
});
var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);
var selectionModel = new Ext.grid.RowSelectionModel({singleSelect: false});
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
stripeRows: true,
autoWidth: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,
colModel: colModel,
selModel: selectionModel,
hidden: false,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
handler: function () {
entitySearchWindow.close();
}
},
{
text: locale["dialogSearch.button.cancel"],
handler: function () {
entitySearchWindow.close();
}
}
]
});
// a modal window that contains both the search query and results panels
var entitySearchWindow = new Ext.Window({
closable: true,
resizable: false,
draggable: true,
modal: true,
viewConfig: {
forceFit: true
},
title: locale['dialogSearch.title'],
items: [entitySearchForm, this._searchResultsPanel]
});
entitySearchWindow.show();
},
/**
* Search for an entity that matches the query and update the results panel with a list of matches
* #param queryString
*/
_doSearch: function(queryString) {
def dummyResults = [['foo'], ['bar'], ['baz']];
self._searchResultsStore.loadData(dummyResults, false);
}
});

It's the same issue you had in an earlier question, the viewConfig is an config item for the grid panel check the docs , so it should be
this._searchResultsPanel = new Ext.grid.GridPanel({
viewConfig: {
forceFit: true
},
....other configs you need,
To be more precise the viewConfig accepts the Ext.grid.GridView configs, feel free to read the docs on that one too.
Otherwise this seems to be the only problem, and i refer the column width, not the gridpanel width. On the gridpanel you have a title and two buttons who doesn't seem to be affected. So i repeat the gridPanel's width is ok, it's the columns width issue.

Try to remove autoWidth from GridPanel configuration, because setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all.
In addition you can try to call .doLayout(false, true) on your grid after it was rendered.

Try to add flex: 1 to your GridPanel