View Full Version : MetaGrid, CheckboxSelectionModel and Ext 3.0

21 Jul 2009, 1:21 AM
In an example (http://extjs-ux.org/repo/authors/mjlecomte/trunk/Ext/ux/metagrid.html) it works perfectly. In this example Ext JS Library 3.0 Pre-alpha was used.

Now, my code (I use official Ext 3.0 release package):

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript" src="js/MetaGrid.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.form.Field.prototype.msgTarget = 'side';

var news_URI = "/api/announce";
var news_plugin = new Ext.ux.grid.MetaGrid();

var recordNews = Ext.data.Record.create([
{name: "id", type: "int"},
{name: "author"},
{name: "atitle"},
{name: "abody"},
{name: "create_modified"}

var store_news = new Ext.data.Store({
remoteSort : true
, reader : new Ext.data.JsonReader({}, recordNews)
, proxy : new Ext.data.HttpProxy({
api : {
read : {
method : "GET"
, url : news_URI
, listeners: {
exception: function(proxy, type, action, o, response, args){
if (type == "remote") {
Ext.MessageBox.alert("Error", response.errors.reason);
} else {
Ext.MessageBox.alert("Warning", "A server error occured. Failed to read news on server side.");

var win = new Ext.Window({
,title:'Ext.ux.form.DateTime Example'
xtype: "grid"
,store : store_news
,plugins : [news_plugin]
,loadMask: true
with this data:

{"totalRecords": 5, "announces": [{"create_modified": "2009-07-03", "atitle": "test", "abody": "first test announce!", "id": 1, "author": "System administrator"}, {"create_modified": "2009-07-20", "atitle": "test2", "abody": "first test announce!", "id": 2, "author": "System administrator"}, {"create_modified": "2009-07-10", "atitle": "modified_test2", "abody": "", "id": 3, "author": "System administrator"}, {"create_modified": "2009-07-08", "atitle": "test", "abody": "first test announce!", "id": 4, "author": "System administrator"}, {"create_modified": "2009-07-10", "atitle": "test", "abody": "first test announce!", "id": 5, "author": "System administrator"}], "success": true, "metaData": {"gridConfig": {"viewConfig": {"enableRowBody": true, "showPreview": false, "forceFit": false}}, "cmDefaults": {"sortable": true}, "fields": [{"selModel": {"cfg": {}, "type": "CheckboxSelectionModel"}}, {"header": "ID", "width": 50, "id": "id", "name": "id"}, {"header": "Author", "width": 120, "id": "author", "name": "author"}, {"header": "Title", "width": 200, "id": "title", "name": "atitle"}, {"header": "Announce", "width": 400, "id": "body", "name": "abody"}, {"header": "Modified", "width": 80, "id": "modified", "name": "create_modified"}], "successProperty": "success", "totalProperty": "totalRecords", "idProperty": "id", "root": "announces"}}

Has some issues. For example, clicking on the header with the checkbox, to check/select all the rows - selects all rows but doesn't change it's own checked state. And I can deselect the row only by clicking it twice.

Any help?

16 Nov 2009, 6:27 AM
I've a ComboBox embeded inside MetaGrid column.I'm using server side sorting for MetaGrid. The column which contains ComboBox is not responding to grid header click(i.e on click of grid column header nothing is happening), but sorting on other columns are working fine. Sorting is enabled for all columns of the grid.
How to overcome this issue.