PDA

View Full Version : LiveSearchGrid - Cell focus problem



talha06
18 May 2012, 12:44 AM
Hi everyone,

I'm trying to implement a live search grid like in the example page, but I'm not able to focus on cells, after I enter text, it just selects the row that includes the cell that has the data. I'll be happy if someone show me my mistake or something I forgot. Here's my code : (I have included LiveSearchGridPanel.js)

Ext.define(appName + '.view.user.UserLiveGrid', {
extend : 'Ext.ux.LiveSearchGridPanel',
alias : 'widget.userlivegrid',
title : 'User Live Search Grid',
iconCls : 'icon-label-color',
store : 'Users',
columnLines : true,
height : 350,
viewConfig: {
stripeRows: true
},
initComponent: function() {

var me = this;

this.columns = [{
xtype: 'rownumberer'
}, {
header: 'ID',
dataIndex: 'userId',
flex : .1
}, {
header: 'Name',
dataIndex: 'name',
flex : 1
}, {
header: 'Surname',
dataIndex: 'surname',
flex : 1
}, {
header: 'Username',
dataIndex: 'username',
flex : 1
}, {
header: 'Password',
dataIndex: 'password',
flex : 1
}, {
header: 'Email',
dataIndex: 'email',
flex : 1
}, {
header: 'Sex',
dataIndex: 'sex',
flex : 1,
renderer: function(value) {
if(value == 1) {
return 'Male';
} else if(value == 2) {
return 'Female';
}
}
}, {
xtype: 'datecolumn',
header: 'Birth Date',
dataIndex: 'birthDate',
format: 'd/m/Y',
flex: 1
}];

this.callParent(arguments);
}
});

talha06
18 May 2012, 2:36 AM
After I have a research at Firebug, I found the solution, these style should be added:



.x-livesearch-match { font-weight: bold; background-color: yellow;}.x-toolbar .x-form-cb-wrap { line-height: 22px;}.x-toolbar .x-form-checkbox { vertical-align: 0;}

Happy Coding! ;)