PDA

View Full Version : 4.2.1 Grid with dockeditems does not render



jgdeveloper
3 Jun 2013, 12:48 PM
I am in the process of upgrading from ExtJS 3.2 to 4.2.1 on an older project. I am trying to mimic the buffered grid in the example http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/grid/infinite-scroll-with-filter.html?theme=classic and I can get the data to pull into the grid successfully from my app, but when I add the docked items, the grid is no longer rendered and nothing shows in firebug. I went so far as to copy the code from the example into my app and it renders just fine. I must be missing something simple, but I cannot get it to render with the search toolbar on the top.

The scary part is that I can see the JSON calls to the underlying application are fired, but I get no grid/toolbar when I add the dockeditems coding back to the grid panel. What am I missing?



Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer',
'Ext.ux.form.SearchField'
]);


Ext.onReady(function(){
Ext.define('sysTables', {
extend: 'Ext.data.Model',
idProperty: 'table_id',
fields: ['tbl_enabled', 'table_id', 'name', 'table_fields_ct', 'description' ]
});


// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'sysTables',
// allow the grid to interact with the paging scroller by buffering
buffered: true,


// The topics-remote.php script appears to be hardcoded to use 50, and ignores this parameter, so we
// are forced to use 50 here instead of a possibly more efficient value.
pageSize: 200,


// This web service seems slow, so keep lots of data in the pipeline ahead!
leadingBufferZone: 500,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'ajax',
url: '/system_instances/' + system_id + 'show.json',
reader: {
root: 'sys_data_tables',
totalProperty: 'total'
},
// sends single sort as multi parameter
simpleSortMode: true,


// Parameter name to send filtering information in
filterParam: 'query',


// The PHP script just use query=<whatever>
encodeFilters: function(filters) {
return filters[0].value;
}
},
listeners: {
totalcountchange: onStoreSizeChange
},
remoteFilter: true,
autoLoad: true
});


function onStoreSizeChange() {
// grid.down('#status').update({count: store.getTotalCount()});
}




var grid = Ext.create('Ext.grid.Panel', {
width: grid_width,
height: grid_height,
title: grid_title,
store: store,
// loadMask: true,
Grid renders unless this section is included, currently commented out
/* dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
width: 400,
fieldLabel: 'Search',
labelWidth: 50,
xtype: 'searchfield',
store: store
}, '->', {
xtype: 'component',
itemId: 'status',
tpl: 'Matching threads: {count}',
style: 'margin-right:5px'
}]
}], */
selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false,
emptyText: '<h1 style="margin:20px">No matching results</h1>'
},
// grid columns
columns: [
{
text: 'Enabled',
width: 60,
sortable: false,
dataIndex: 'tbl_enabled',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if (value == true)
return '<img alt="Enabled" class="object_status" height="16" src="/images/icons/enabled.png" width="16">';
else
return '<img alt="Disabled" class="object_status" height="16" src="/images/icons/disabled.png" width="16">';
} // end renderer
},{
text: 'Table',
width: 230,
sortable: true,
dataIndex: 'name',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
var url = "/system_instances/" + system_id + "/data_tables/" + record.getId();
return '<a href=' + url +' target="_parent">' + value +'</a>';
}//end renderer}
},{
text: 'Fields Count',
width: 100,
sortable: false,
dataIndex: 'table_fields_ct'
},{
text: 'Description',
width: 300,
sortable: false,
dataIndex: 'description',
flex: 1


}],
renderTo: dom_id
});
});

slemmon
5 Jun 2013, 12:00 PM
I tried adding a docked toolbar to the infinite scrolling example with buffered store and seemed to work ok for me in 4.2.1 in Chrome.

Does the following work for you?


Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});


// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'ForumThread',
remoteGroup: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
leadingBufferZone: 300,
pageSize: 100,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true,
// sends single group as multi parameter
simpleGroupMode: true,


// This particular service cannot sort on more than one field, so grouping === sorting.
groupParam: 'sort',
groupDirectionParam: 'dir'
},
sorters: [{
property: 'threadid',
direction: 'ASC'
}],
autoLoad: true,
listeners: {


// This particular service cannot sort on more than one field, so if grouped, disable sorting
groupchange: function(store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;

for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},


// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function(store, operation) {
if (operation.groupers && operation.groupers.length) {
delete operation.sorters;
}
}
}
});


function renderTopic(value, p, record) {
return Ext.String.format(
'<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}


var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
collapsible: true,
title: 'ExtJS.com - Browse Forums',
plugins: 'bufferedrenderer',
store: store,
loadMask: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Test button'
}]
}],
selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false
},
features:[{
ftype: 'grouping',
hideGroupedHeader: false
}],
// grid columns
columns:[{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true
},{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false
}],
renderTo: Ext.getBody()
});

jgdeveloper
5 Jun 2013, 12:16 PM
Thanks for the response - I will try it out and report back. It might be tomorrow morning before I can test it.

jgdeveloper
6 Jun 2013, 7:44 AM
I tried the coding from the previous post and I get the following error:

Uncaught TypeError: Cannot read property 'length' of undefined ext-all.js:21 (http://demo5.datric.net/ext-4.2.1.883/ext-all.js)


I am not sure what is going on with the example. I got it working, so I will post the coding in a separate reply.

jgdeveloper
6 Jun 2013, 8:11 AM
I am not 100% sure what changed to make this work. I think the server was rebooted and it cleared some caching or old references to the compat libs. For reference, here is the clean working code:



Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer',
'Ext.ux.form.SearchField'
]);


Ext.onReady(function(){
Ext.define('sysTables', {
extend: 'Ext.data.Model',
idProperty: 'table_id',
fields: ['tbl_enabled', 'table_id', 'name', 'table_fields_ct', 'description' ]
});


// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'sysTables',
// allow the grid to interact with the paging scroller by buffering
buffered: true,


// The topics-remote.php script appears to be hardcoded to use 50, and ignores this parameter, so we
// are forced to use 50 here instead of a possibly more efficient value.
pageSize: 200,


// This web service seems slow, so keep lots of data in the pipeline ahead!
leadingBufferZone: 500,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'ajax',
url: '/system_instances/' + system_id + 'show.json',
reader: {
root: 'sys_data_tables',
totalProperty: 'total'
},
// sends single sort as multi parameter
simpleSortMode: true,


// Parameter name to send filtering information in
filterParam: 'query',


// The PHP script just use query=<whatever>
encodeFilters: function(filters) {
return filters[0].value;
}
},
listeners: {
totalcountchange: onStoreSizeChange
},
remoteFilter: true,
autoLoad: true
});


function onStoreSizeChange() {
grid.down('#status').update({count: store.getTotalCount()});
}




var grid = Ext.create('Ext.grid.Panel', {
width: grid_width,
height: grid_height,
title: grid_title,
store: store,
// loadMask: true,


dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
width: 400,
fieldLabel: 'Search',
labelWidth: 50,
xtype: 'searchfield',
store: store
}, '->', {
xtype: 'component',
itemId: 'status',
tpl: 'Matching tables: {count}',
style: 'margin-right:5px'
}]
}],




selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false,
emptyText: '<h1 style="margin:20px">No matching results</h1>'
},
// grid columns
columns: [
{
text: 'Enabled',
width: 60,
sortable: false,
dataIndex: 'tbl_enabled',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if (value == true)
return '<img alt="Enabled" class="object_status" height="16" src="/images/icons/enabled.png" width="16">';
else
return '<img alt="Disabled" class="object_status" height="16" src="/images/icons/disabled.png" width="16">';
} // end renderer
},{
text: 'Table',
width: 230,
sortable: true,
dataIndex: 'name',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
var url = "/system_instances/" + system_id + "/data_tables/" + record.getId();
return '<a href=' + url +' target="_parent">' + value +'</a>';
}//end renderer}
},{
text: 'Fields Count',
width: 100,
sortable: false,
dataIndex: 'table_fields_ct'
},{
text: 'Description',
width: 300,
sortable: true,
dataIndex: 'description',
flex: 1




}],
renderTo: dom_id
});
});