Grid Highlight

[csextjs]

Hi Everyone,

Still new to this EXTJS but managed to create my first GRID.
But unlike the array-grid example, I can not hightlight the row as I click on it.
And also, as I hover over a row, I can't get it to hightlight.

How can I fix this?

Thank you in advance.

[hendricd]

You'll have to post some code (in [code/] tags) for further study.

[csextjs]

Thanks. Here it is.

Ext.onReady(function(){
var toprid=0; botrid=0;
var thestat = document.getElementById('stat').value;
var thestatdscrp;
if (thestat == 'O') { thestatdscrp='Open' };
if (thestat == 'C') { thestatdscrp='Closed' };

// create the Data Store
var store = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'workorder?stat=' + thestat + '&'
}),

// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'worder',
totalProperty: 'totalcount',
id: 'recid',
fields: [ 'recid',
'wodate', 'custname', 'wono', 'grpid', 'city', 'state', 'priority', 'duedate', 'orderby', 'reqtype', 'rmemo', 'woaction'
]
}),

// turn on remote sorting
remoteSort: true
});
store.setDefaultSort('wodate', 'asc');

// pluggable renders
function renderTopic(value, p, record){
// alert('fid: ' + fid);
return String.format(
'<b><a href="woform?t={2}" target="_blank">{0}</a></b><br>By {1}',
value, record.data.orderby, record.data.recid);
}
function renderId(value, p, record){
return String.format(
'{1}',
value, record.id);
}
//function renderLast(value, p, r){
// return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
//}

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "ID",
dataIndex: 'id',
width: 80,
hidden: true
// renderer: renderId
},{
header: "Location",
dataIndex: 'custname',
width: 85,
renderer: renderTopic
},{
header: "Date",
dataIndex: 'wodate',
width: 20,
align: 'left'
},{
header: "Group",
dataIndex: 'grpid',
width: 15,
align: 'center'
},{
header: "W/O No.",
dataIndex: 'wono',
width: 20,
align: 'left'
},{
header: "City",
dataIndex: 'city',
width: 35,
align: 'center'
},{
header: "State",
dataIndex: 'state',
width: 11,
align: 'center'
},{
header: "Pr",
dataIndex: 'priority',
width: 10,
align: 'center'
},{
header: "Due Date",
dataIndex: 'duedate',
width: 20,
align: 'center'
}]);

// by default columns are sortable
cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({
el:'grid-example',
// width:700,
height:500,
// autoHeight: true,
autoWidth: true,
title: 'Work Orders - ' + thestatdscrp,
store: store,
stripeRows: true,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
var compimg = '';
if (record.data.reqtype == 'C') {
compimg='<img src="images/complain.gif" alt="" border="0" align="middle"></img>&nbsp;'
}
if(this.showPreview){
p.body = '<p>'+compimg+'<font color="green">'+record.data.rmemo+'</font><br><br>'+record.data.woaction+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
plugins:[new Ext.ux.grid.Search({
mode:'remote' // local
,iconCls:false
,dateFormat:'m/d/Y'
})],
bbar: new Ext.PagingToolbar({
pageSize: 12,
store: store,
displayInfo: true,
displayMsg: 'Displaying Work Orders {0} - {1} of {2}',
emptyMsg: "No Work-Orders to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: toggleDetails
}]
}),
tbar: new Ext.Toolbar({
items:[
'-',{
pressed: true,
enableToggle:true,
text: 'Add',
cls: '',
toggleHandler: ''
},'-',{
pressed: true,
enableToggle:true,
text: 'Delete',
cls: '',
toggleHandler: 'doDel'
}]
})
});

// var gridFoot = grid.getView().getFooterPanel(true);
grid.render();
grid.doLayout();

grid.getSelectionModel().selectFirstRow();

// trigger the data store load
store.load({params:{start:0, limit:12, stat:thestat}});

function toggleDetails(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}

function doDel(){
var m = grid.getSelections();
if(m.length > 0)
{
Ext.MessageBox.confirm('Message', 'Do you really want to delete them?' , doDel2);
}
else
{
Ext.MessageBox.alert('Error', 'Please select at least one item to delete');
}
}

function doDel2(btn){
alert('delete this...')
}
});

[hendricd]

Can you wrap that in [code/] tags please?

[csextjs]

I am sorry. Did I do that right?

[cadudecastroalves]

Replace this line:

sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn} ) 

To this:

sm: new Ext.grid.CheckboxSelectionModel() 

[cadudecastroalves]

I am sorry. Did I do that right?

You used QUOTE tags instead of CODE tags. You can use PHP tags, too.

[csextjs]

Wow, that fixed it. The clicked row is now highlighted.

Now, the other issue, highlight the row as I hover over the row.

Thank you.

[cadudecastroalves]

From GridPanel docs:

trackMouseOver : Boolean 
True to highlight rows when the mouse is over. Default is true.

Check your code. Do you see something different? Please, guy. Read the docs before ask for a question. This is really simple. If you just copy and paste an example code, you never will learn how to do anything.

[csextjs]

That was it. I had it,trackMouseOver, set to false.
I will study the docs before posting next time.

Thanks again Everyone.