View Full Version : [CLOSED][3.??] GridPanel columns not sortable by setting cm.defaultSortable to true

2 Jul 2009, 10:09 AM
Ext version tested:

3.0 svn:4658

Browser versions tested against:

FireFox 3.0.11 on Mac OS 10.5.7

Description :

Create a GridPanel with a store and set columnModel.defaultSortable to true.
Verify GridPanel columns are sortable. With 3.0 RC2 and 3.0 svn:4658 none of the GridPanel columns are sortable. When I click on any column nothing happens.

You can try with edit-grid.html example. Anyway I am including slightly modified code of edit-grid example.

Here is the html file contents (make sure to update the path for ext files)

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Editor Grid Example</title>

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

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script><script type="text/javascript">_uacct = "UA-1396058-1";urchinTracker();</script>
<!-- LIBS -->
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>

<!-- ENDLIBS -->

<script type="text/javascript" src="lib/ext/ext-all.js"></script>

<script type="text/javascript" src="js/edit-grid.js"></script>

<h1>Editor Grid Example</h1>

<p>This example shows how to create a grid with inline editing.</p>
<p>Note that the js is not minified so it is readable. See <a href="js/edit-grid.js">edit-grid.js</a>.</p>

<p>The data in the grid is loaded from <a href="plants.xml">plants.xml</a>.</p>

<!-- you must define the select box here, as the custom editor for the 'Light' column will require it -->
<select name="light" id="light" style="display: none;">
<option value="Shade">Shade</option>

<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>

<option value="Mostly Sunny">Mostly Sunny</option>

<option value="Sunny">Sunny</option>

<div id="editor-grid"></div>


Here is the javascript code :

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


function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
// shorthand alias
var fm = Ext.form;

// custom column plugin example
var checkColumn = new Ext.grid.CheckColumn({
header: "Indoor?",
dataIndex: 'indoor',
width: 55

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
header: "Common Name",
dataIndex: 'common',
width: 220,
editor: new fm.TextField({
allowBlank: false
header: "Light",
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
listClass: 'x-combo-list-small'
header: "Price",
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
header: "Available",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'

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

// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}

// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: 'plants.xml',

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'plant'
}, Plant),

sortInfo:{field:'common', direction:'ASC'}

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
title:'Edit Plants?',

tbar: [{
text: 'Add Plant',
handler : function(){
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
store.insert(0, p);
grid.startEditing(0, 0);

// trigger the data store load

Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
this.id = Ext.id();
this.renderer = this.renderer.createDelegate(this);

Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);

onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';

2 Jul 2009, 10:31 AM
Please see: http://extjs.com/forum/showthread.php?p=352084#post352084

Marking as closed.

2 Jul 2009, 3:48 PM
thanks, it is working once I set defaultSortable during construction time.