Rating - Grid Custom Column Renderer [Archive]

zitadeveloper

23 Mar 2008, 8:33 PM

Straight ahead, i have to say, that im a beginner in programming. I guess you will see this in my code. But i tried to implement a rating System,like Apple uses it in iTunes, in a grid.
And now i want to share my results with the Ext.Community.
Implemented in the Grouping Example it looks like this:

And here is the code:
The HTML Page, including the grid and alittle CSS

<html>
<head>
<title>Grid Rating Example</title>

<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />

<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="js/ext-rating.js"></script>
<script type="text/javascript" src="ext-rating-col.js"></script>
<script type="text/javascript">

<style>
.rating {
width:98%;
height:16px;
background: transparent no-repeat center 0;
cursor:pointer;
}
</style>

/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;
var rateColumn = new RateColumn();

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'rating'}
]);

var grid = new xg.GridPanel({
store: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
}),

columns: [
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
rateColumn
],

view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
plugins: [rateColumn],
renderTo: document.body
});
});

// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'8/1 12:00am', 'Manufacturing', 2],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing', 4],
['Altria Group Inc',83.81,0.28,0.34,'10/1 12:00am', 'Manufacturing', 1],
['American Express Company',52.55,0.01,0.02,'9/1 10:00am', 'Finance',1],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services',2],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing',1],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services',4],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance',1],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing',1],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing',1],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing',2],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive',4],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer',1],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing',1],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer',2],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer',1],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical',2],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance',1],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food',1],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical',1],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer',1],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food',3],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail',1],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing',4],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer',4],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services',2],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail',1],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services',4]
];

</script>
</head>
<body>
</body>
</html>The ext-rating.js

var rating = {

/////////////////////////////////////////////////////////////////////////////////////////////////
/*
Ext-Rating-System
The Ext-Rating-System is based on a method writing values to title and Style-classes.

1. The items are rendered by the custom Renderer. The value of each single Image is
included in it's own class. Just like: '.rate1','.rate2' etc.
The overall value of each item is stored in the title of the parent-DIV.

2. A save function is called, which adds a click-handler to each Image and saves the new
value to the parent-DIV

3.
*/
/////////////////////////////////////////////////////////////////////////////////////////////////
// @ Configurations @////

im1: 'images/crown.png',
im2: 'images/crown_fade.png',
no: 4,

// @ You can modify these lines, to fit your source and number of favorite icons @////
/////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////
// @ Renderer @////

renderer: function(value){

crowns = '';

for (var i = 1; i <= value; i++){

crowns += '<img class="rate'+i+'" src="'+rating.im1+'">';

}

for (var f = i; f <= rating.no; f++){

crowns += '<img class="rate'+f+'" src="'+rating.im2+'">';

}

return '<div class="rating" title="'+value+'">'+crowns+'</div>';

},

// @ @////
/////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////
// @ Save @////

save: function(){

var el = Ext.select('.rating img');

el.on('click', function(e, ele){

var o = Ext.get(ele);
var value = o.dom.className.substr(4,1);
o.parent().set({title: value});;

});

},

// @ @////
/////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////
// @ init @////

init: function(){

Ext.select('.rating').each(function(el){

rating.save();

});

}
// @ Let' go!!! @////
/////////////////////////////////////////////////////////////////////////////////////////////////

}and finaly the ext-rating-col.js

RateColumn = function(){
var grid, record;

function getRecord(t){
var index = grid.getView().findRowIndex(t);
return grid.store.getAt(index);
}

function onMouseDown(e, t){
var parentDiv = t.parentNode;
if(parentDiv.className = 'rating'){
var newRating = Ext.fly(t).dom.className.substr(4,1);
e.stopEvent();
var record = getRecord(t);
record.set('rating', newRating);
}
}

Ext.apply(this,
{
header: 'Rating',
width: 100,
sortable: true,
fixed: true,
dataIndex: 'rating',
id: 'fav-col',
renderer: rating.renderer,
init : function(xg){
grid = xg;
grid.on('render', function(){
var view = grid.getView();
view.mainBody.on('mousedown', onMouseDown);
});
}
});

};I hope someone find this useful.
I used it in a demo-air application and the data-update worked fine this way. I think you have to change it, working with others, then local databases.
http://s212738125.online.de/test/crown.png http://s212738125.online.de/test/crown_fade.png

jerrybrown5

23 Mar 2008, 9:14 PM

Thanks! This will help me on a project that I'm working on.

KaneZMY

2 Apr 2008, 6:21 PM

Thanks for sharing, this is really helped me out.

InuyashaXTC

2 Jun 2008, 2:02 PM

I can learn from this example, much appreciated.

Condor

12 Dec 2008, 3:01 AM

The only problem with this plugin is that it doesn't allow multiple rating columns inside a single grid (and the dataIndex of the column is fixed to 'rating').

I wrote a quick update that supports:
1. Several rating columns in a single grid.
2. Optionally, fractional selection.

Plugin code:

Ext.ns('Ext.ux.grid');
Ext.ux.grid.RateColumnPlugin = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id(null, 'rating-');
}
}
Ext.apply(Ext.ux.grid.RateColumnPlugin.prototype, {
tickSize: 20,
selectedCls: 'rating-selected',
unselectedCls: 'rating-unselected',
roundToTick: true,
init: function(grid){
this.grid = grid;
grid.on('render', function(c){
c.getView().mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.' + this.id, stopEvent: true});
}, this);
},
onMouseDown: function(e, t){
var value = (e.getXY()[0] - Ext.fly(t).getX()) / this.tickSize;
if(this.roundToTick){
value = Math.ceil(value);
}
var view = this.grid.getView();
var rowIndex = view.findRowIndex(t);
var colIndex = view.findCellIndex(t);
var dataIndex = this.grid.getColumnModel().getDataIndex(colIndex);
this.grid.getStore().getAt(rowIndex).set(dataIndex, value);
},
createRenderer: function(count){
return function(value, count){
return '<div class="' + this.id + ' ' + this.unselectedCls + '" style="width:' + Math.round(this.tickSize * count) + 'px">' +
'<div class="' + this.selectedCls + '" style="width:' + Math.round(this.tickSize * value) + 'px"> </div></div>';
}.createDelegate(this, [count || 5], 1);
}
});
CSS for plugin:

.rating-selected {
background: transparent url(crown.png) repeat-x left center;
}
.rating-unselected {
background: transparent url(crown_fade.png) repeat-x left center;
}
(uses the http://s212738125.online.de/test/crown.png and http://s212738125.online.de/test/crown_fade.png image of the original plugin)

Usage:

var rateColumnPlugin = new Ext.ux.grid.RateColumnPlugin({
roundToTick: false
});
var grid = new Ext.grid.GridPanel({
...
plugins: [rateColumnPlugin],
columns: [
...
{header: 'Rate 1', dataIndex: 'rate1', width: 100, renderer: rateColumnPlugin.createRenderer(5)},
{header: 'Rate 2', dataIndex: 'rate2', width: 60, renderer: rateColumnPlugin.createRenderer(3)}
...
]
});

The plugin has the following config options:
tickSize: The width in px of one 'tick' in a rating (default: 20).
selectedCls: The CSS class name with the 'selected' rating background image (default: 'rating-selected').
unselectedCls: The CSS class name with the 'unselected' rating background image (default: 'rating-unselected').
roundToTick: Allows for fractional selection if set to false (default: true).

Use the createRenderer method to create a renderer for a rating column. It has a parameter that specifies how many rating ticks should be visible (default: 5).

galdaka

14 Dec 2008, 2:11 AM

Is posible put a example for D&D to ext distribution folder and test?

Thanks in advance,

murrah

28 Dec 2009, 6:19 PM

Is posible put a example for D&D to ext distribution folder and test?

Thanks in advance,

Here is a test version I created. It is a modified version of the standard array-grid.html example in the Ext distro.

Unzip into the {your Ext path}\examples\grid folder and browse to array-grid-stars.html

Using Condor's code version above, this allows multiple rating columns. I have created two instances with different config so you can have each column with it's own style of rating - in this case a 5 point crown rating (whole crowns only) and a 3 point star rating (partial stars allowed).

Cheers,
Murray

murrah

29 Dec 2009, 12:05 AM

Hi,

After playing with this plugin today I added some functionality to (optionally) tell the plugin to auto save the store once the rating has been passed to it.

My app is set up so that it makes sense to send a changed rating to the server as soon as the user changes it because usually that will be the only thing that changes on the grid row. Therefore, my store's autoSave is set to false because that's how I want it for the other editing method of the gridrow.

So, for all other edits the store.save() method will only fire when I tell it to. For the rating edit, it fires the store.save() method immediately because I have set the rater objects autoSave property to true.

See the two lines I changed below. I have NOT added them to the zip file above.

Ext.apply(Ext.ux.grid.RateColumnPlugin.prototype, {
tickSize: 20,
selectedCls: 'rating-selected',
unselectedCls: 'rating-unselected',
roundToTick: true,
autoSave: false, // <---- Added this config option. ie default to false

onMouseDown: function(e, t){
var value = (e.getXY()[0] - Ext.fly(t).getX()) / this.tickSize;
if(this.roundToTick){
value = Math.ceil(value);
}
var view = this.grid.getView();
var rowIndex = view.findRowIndex(t);
var colIndex = view.findCellIndex(t);
var dataIndex = this.grid.getColumnModel().getDataIndex(colIndex);
this.grid.getStore().getAt(rowIndex).set(dataIndex, value);
if (this.autoSave) this.grid.getStore().save(); // <--- Added this line
},

and my config looks like this:

// create the Star Rating plugin
var rateColumnPlugin = new Ext.ux.grid.RateColumnPlugin({
roundToTick: true, // Whole stars only
tickSize:16, // Star image is 16 px wide
autoSave: true // Store.save() is automatic ie send changed data to server
});

Cheers,
Murray

murrah

30 Dec 2009, 4:39 PM

And another thing....

It is very hard to set the rating to zero - you have to be very precise with the mouse click. So, I added the following so that if you are within the "zero zone" the value becomes zero.

Ext.apply(Ext.ux.grid.RateColumnPlugin.prototype, {
tickSize: 20,
selectedCls: 'rating-selected',
unselectedCls: 'rating-unselected',
roundToTick: true,
zeroSensitivity : 0.25, //<--- added this config option

onMouseDown looks like:

onMouseDown: function(e, t){
var value = (e.getXY()[0] - Ext.fly(t).getX()) / this.tickSize;
if (value < this.zeroSensitivity) { value = 0} //<--- added this line
if(this.roundToTick){
value = Math.ceil(value);
}
var view = this.grid.getView();
var rowIndex = view.findRowIndex(t);
var colIndex = view.findCellIndex(t);
var dataIndex = this.grid.getColumnModel().getDataIndex(colIndex);
this.grid.getStore().getAt(rowIndex).set(dataIndex, value);
},

Note that the sensitivity works independantly of this.roundToTick so you might want to move the line above into the if(this.roundToTick){ block if you only want the sensitivity to apply for whole stars (ticks).

Cheers,
Murray

deepaks

11 Feb 2010, 6:44 PM

Thanks for the wonderful sample. I have two more questions
How do I make a PHP call to the backend with the rating value (2.5 for eg) and also how do I disable the rating once a rating has been chosen.?

murrah

11 Feb 2010, 11:13 PM

How do I make a PHP call to the backend with the rating value (2.5 for eg)

It is just a grid column like any other so however you are saving the rest of the record will work. I cant answer more precisely since it depends on how you have set up your grid store. Check out the docs and the forum if you havent got your data saving yet.

how do I disable the rating once a rating has been chosen.?

This seems to work. Just replace the onMouseDown method with this one and see if it does what you want.

onMouseDown: function (e, t) {
var view = this.grid.getView();
var rowIndex = view.findRowIndex(t);
var colIndex = view.findCellIndex(t);
var dataIndex = this.grid.getColumnModel().getDataIndex(colIndex);
var rec = this.grid.getStore().getAt(rowIndex)
var currentValue = rec.get(dataIndex);
// Assuming a zero value means that the rating is yet to be set,
// If it is zero in the store or it has been modified since the last load or commit,
// allow the user to set the value. Otherwise, prevent any changes by ignoring the mouse action.
if (currentValue == 0 || rec.isModified(dataIndex)) {
var value = (e.getXY()[0] - Ext.fly(t).getX()) / this.tickSize;
if (value < this.zeroSensitivity) {
value = 0
}
if (this.roundToTick) {
value = Math.ceil(value);
}
this.grid.getStore().getAt(rowIndex).set(dataIndex, value);
}
},

If that works as you intend, I would add a config option eg
allowChange : true,

and add a test for that by changing the line to:

if (this.allowChange || currentValue == 0 || rec.isModified(dataIndex)) {

So, the fragment up to the end of the onMouseDown becomes:

Ext.apply(Ext.ux.grid.RateColumnPlugin.prototype, {
tickSize: 20,
selectedCls: 'rating-selected',
unselectedCls: 'rating-unselected',
roundToTick: true,
zeroSensitivity: 0.25,
allowChange: true, // <--- Added this config option
init: function (grid) {
this.grid = grid;
grid.on('render', function (c) {
c.getView().mainBody.on('mousedown', this.onMouseDown, this, {
delegate: '.' + this.id,
stopEvent: true
});
},
this);
},
onMouseDown: function (e, t) {
var view = this.grid.getView();
var rowIndex = view.findRowIndex(t);
var colIndex = view.findCellIndex(t);
var dataIndex = this.grid.getColumnModel().getDataIndex(colIndex);
var rec = this.grid.getStore().getAt(rowIndex)
var currentValue = rec.get(dataIndex);
// Assuming a zero value means that the rating is yet to be set,
// If it is zero in the store or it has been modified since the last load or commit,
// allow the user to set the value. Otherwise, prevent any changes by ignoring the mouse action.
if (this.allowChange || currentValue == 0 || rec.isModified(dataIndex)) {
var value = (e.getXY()[0] - Ext.fly(t).getX()) / this.tickSize;
if (value < this.zeroSensitivity) {
value = 0
}
if (this.roundToTick) {
value = Math.ceil(value);
}
this.grid.getStore().getAt(rowIndex).set(dataIndex, value);
}
},
// etc ....

Then, you can control whether this instance allows subsequent changes or not via the config passed in.

// create the Star Rating plugin
var rateColumnPluginRate2 = new Ext.ux.grid.RateColumnPlugin({
tickSize: 16, // ie Same as star image width in px
selectedCls: 'rating-selected-star',
unselectedCls: 'rating-unselected-star',
allowChange:false, //<---- Prevent change if non zero value
roundToTick: false
});
Cheers,
Murray

masnatacion

12 Feb 2010, 9:58 AM

great plugin.=D>

its possible, add a number?
http://img25.imageshack.us/img25/4658/sinttulo1np.gif

Cheers
Mike

murrah

12 Feb 2010, 12:03 PM

great plugin.=D>

its possible, add a number?
http://img25.imageshack.us/img25/4658/sinttulo1np.gif

Cheers
Mike

You can use whatever image files you want to use. But I am guessing that is not your question. Can you be more specific about what you want please?

EDIT: Please ignore previous comment - that's what I get for answering posts before I am fully awake! Sorry, I get what your question is now and will look at it later.

deepaks

17 Feb 2010, 5:57 PM

It is just a grid column like any other so however you are saving the rest of the record will work. I cant answer more precisely since it depends on how you have set up your grid store. Check out the docs and the forum if you havent got your data saving yet.

This seems to work. Just replace the onMouseDown method with this one and see if it does what you want.

onMouseDown: function (e, t) {
var view = this.grid.getView();
var rowIndex = view.findRowIndex(t);
var colIndex = view.findCellIndex(t);
var dataIndex = this.grid.getColumnModel().getDataIndex(colIndex);
var rec = this.grid.getStore().getAt(rowIndex)
var currentValue = rec.get(dataIndex);
// Assuming a zero value means that the rating is yet to be set,
// If it is zero in the store or it has been modified since the last load or commit,
// allow the user to set the value. Otherwise, prevent any changes by ignoring the mouse action.
if (currentValue == 0 || rec.isModified(dataIndex)) {
var value = (e.getXY()[0] - Ext.fly(t).getX()) / this.tickSize;
if (value < this.zeroSensitivity) {
value = 0
}
if (this.roundToTick) {
value = Math.ceil(value);
}
this.grid.getStore().getAt(rowIndex).set(dataIndex, value);
}
},If that works as you intend, I would add a config option eg
allowChange : true,and add a test for that by changing the line to:

if (this.allowChange || currentValue == 0 || rec.isModified(dataIndex)) {So, the fragment up to the end of the onMouseDown becomes:

Ext.apply(Ext.ux.grid.RateColumnPlugin.prototype, {
tickSize: 20,
selectedCls: 'rating-selected',
unselectedCls: 'rating-unselected',
roundToTick: true,
zeroSensitivity: 0.25,
allowChange: true, // <--- Added this config option
init: function (grid) {
this.grid = grid;
grid.on('render', function (c) {
c.getView().mainBody.on('mousedown', this.onMouseDown, this, {
delegate: '.' + this.id,
stopEvent: true
});
},
this);
},
onMouseDown: function (e, t) {
var view = this.grid.getView();
var rowIndex = view.findRowIndex(t);
var colIndex = view.findCellIndex(t);
var dataIndex = this.grid.getColumnModel().getDataIndex(colIndex);
var rec = this.grid.getStore().getAt(rowIndex)
var currentValue = rec.get(dataIndex);
// Assuming a zero value means that the rating is yet to be set,
// If it is zero in the store or it has been modified since the last load or commit,
// allow the user to set the value. Otherwise, prevent any changes by ignoring the mouse action.
if (this.allowChange || currentValue == 0 || rec.isModified(dataIndex)) {
var value = (e.getXY()[0] - Ext.fly(t).getX()) / this.tickSize;
if (value < this.zeroSensitivity) {
value = 0
}
if (this.roundToTick) {
value = Math.ceil(value);
}
this.grid.getStore().getAt(rowIndex).set(dataIndex, value);
}
},
// etc ....
Then, you can control whether this instance allows subsequent changes or not via the config passed in.

// create the Star Rating plugin
var rateColumnPluginRate2 = new Ext.ux.grid.RateColumnPlugin({
tickSize: 16, // ie Same as star image width in px
selectedCls: 'rating-selected-star',
unselectedCls: 'rating-unselected-star',
allowChange:false, //<---- Prevent change if non zero value
roundToTick: false
});Cheers,
Murray

This does not seem to work. If I set 'allowchange-false', it still allows me to change it over and over again.

Thanks

deepaks

17 Feb 2010, 6:11 PM

Never mind, I changed the logic to if ( this.allowChange || currentValue == 0 ) {

and that worked.

Any ideas on how to print "Thank you" under the rating with a number once the rating is submitted.

talha06

14 Mar 2010, 11:04 AM

Hello everyone,

Congratulations zitadeveloper, this is really great plugin, I liked a lot. Thank you for sharing it with us.

But I have a problem. First of all is this compatible with Ext JS 3.0? Because I have problem. But as I looked your plugin, it seems that it's compatible.

Here's my sample grid code that I wrote for testing this plugin :

Ext.onReady(function() {
Ext.QuickTips.init();

var xg = Ext.grid;
var rateColumn = new RateColumn();

var Calisan = new Ext.data.Record.create([{
name: 'cID',
type: 'int',
allowBlank: false
},
{
name: 'cTCNo',
type: 'int',
allowBlank: false
},
{
name: 'cAd',
type: 'string',
allowBlank: false
},
{
name: 'cSoyad',
type: 'string',
allowBlank: false
},
{
name: 'cCinsiyet',
type: 'string',
allowBlank: false
},
{
name: 'cYas',
type: 'int',
allowBlank: false
},
{
name: 'rating',
type : 'int'
}]);

var colMod = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
new Ext.grid.RowNumberer(), {
header: '<b>�al??an ID</b>',
dataIndex: 'cID',
width: 80
},
{
header: '<b>�al??an TC No</b>',
dataIndex: 'cTCNo',
width: 100
},
{
header: '<b>�al??an Ad</b>',
dataIndex: 'cAd',
width: 150
},
{
header: '<b>�al??an Soyad</b>',
dataIndex: 'cSoyad',
width: 150
},
{
header: '<b>�al??an Ya?</b>',
dataIndex: 'cYas',
width: 80
},
{
header: '<b>�al??an Cinsiyet</b>',
dataIndex: 'cCinsiyet',
width: 100
}, rateColumn
]
});

var myProxy = new Ext.data.HttpProxy({
url : 'GetCalisanlar',
method : 'POST'
});

var myStore = new Ext.data.JsonStore({
root: 'rows',
url: myProxy,
fields: 'Calisan',
totalProperty : 'totalCount',
autoLoad : true,
sortInfo: {
field: 'cID',
direction: 'ASC'
}
});

var selMod = new Ext.grid.RowSelectionModel({
singleSelect : true
});

var myGrid = new xg.GridPanel({
renderTo : document.body,//'gridDiv',
id : 'myGridID',
title : '�al??anlar?m?z',
collapsible: false,
iconCls : 'x-grid-icon',
frame : true,
border : true,
anchor : '100%',
width : 900,
autoHeight : true,
store : myStore,
colModel : colMod,
sm : selMod,
loadMask : {
msg : 'Y�kleniyor...'
},
plugins: [rateColumn]
});
});
Firebug gives this error :

Record.prototype is undefined
f = Record.prototype.fields, fi = f.items, fl = f.length;

I'll be so happy if someone helps me..
Thanx in advance.
With regards,
Talha

talha06

14 Mar 2010, 12:12 PM

thank you so much dear Murray for your great adds, really this plugin is just amazing.. :)
And of course big thanx to zitadeveloper.

murrah

14 Mar 2010, 1:41 PM

thank you so much dear Murray for your great adds,
And of course big thanx to zitadeveloper.

Thanks, I really only added to it. I would not have had any idea how to build that from scratch. Credits also to Condor.

:)

talha06

14 Mar 2010, 1:54 PM

Thanks, I really only added to it. I would not have had any idea how to build that from scratch. Credits also to Condor.

:)
yeah u're right.. by the way I want to learn that how can I enable autoSave configuration. Because I use DB, so I need to commit changes to my DB. I enabled autoSave : true, but how can I commit changes with using autoSave & JsonWriter.. I can do this with using a button that handles Ajax request but I want to use Ext's config to do this job.

Thanx in advance,
with regards,
Talha