PDA

View Full Version : ExtJS 4.2.x : Grid not expand/contract not working correctly with remote json store



nathantp
18 May 2014, 10:12 AM
ExtJs Version: 4.2.1.883


I've created a grid that reads from a remote json data source using with Ext.data.TreeStore. It's reading data from the data source however the expand/contract functionality is not working and instead rendering a checkbox. The only way I can get the grid to render child nodes is by calling expandAll() on the grid. Using the example on the docs for a similar setup I was able to get the grid to function correctly.


Any help would much appreciated!



TreeStore Code:




(function() {
Ext.define("Page", {
extend: "Ext.data.Model"
});

this.pageStore = function() {
return Ext.create("Ext.data.TreeStore", {
model: "Page",
pageSize: 25,
remoteSort: true,
defaultRootProperty: "pages",
root: {
text: "Pages",
expanded: true
},
proxy: {
type: "ajax",
url: gon.root_api_url + "/pages.json",
reader: {
type: "json",
root: "pages",
totalProperty: 'metaData.total_records',
metaProperty: 'metaData'
}
}
});
};

}).call(this);



TreeGrid Source:







(function() {
this.loadPagesTreeGrid = function(element) {
var calculatedHeight, gridHeight, pageStore, pagesTreeGrid, reconfigure_count;
pageStore = this.pageStore();

reconfigure_count = 0;

pageStore.on("datachanged", function(store, records, successful, eOpts) {
var actionsColumn;
actionsColumn = {
text: 'Actions',
sortable: false,
hideable: true,
renderer: function(a, b, data) {
var actions, deleteLink, editLink, resourceUrl, viewLink;
actions = store.proxy.reader.rawData.actions || [];
resourceUrl = "/pages/" + data.raw.id;
viewLink = '';
editLink = '';
if (actions['view']) {
viewLink = "<a href='" + data.raw.public_path + "' target='_blank' title='View'><i class='fa fa-external-link'></i></a>";
}
if (actions['edit']) {
editLink = "<a href='" + resourceUrl + "/edit' title='Edit'><i class='fa fa-pencil'></i></a>";
}
if (data.raw.allow_destroy && actions['delete']) {
deleteLink = "<a href='" + resourceUrl + "/' title='Delete' data-method='delete' data-confirm='Are you sure? This will remove all child pages.' rel='nofollow'><i class='fa fa-times'></i></a>";
} else {
deleteLink = "";
}
return viewLink + ' ' + editLink + ' ' + deleteLink;
}
};
reconfigure_count++;
if (store.proxy.reader.rawData.success) {
store.proxy.reader.rawData.columns.push(actionsColumn);
if (reconfigure_count < 2) {
pagesTreeGrid.headerCt.add(store.proxy.reader.rawData.columns);
return pagesTreeGrid.getView().refresh();
}
} else {
return Ext.MessageBox.alert("An Error Occured", store.proxy.reader.rawData.message);
}
});


pagesTreeGrid = Ext.create("Ext.tree.Panel", {
store: pageStore,
renderTo: element,
height: 500,
forceFit: true,
expand: true,
title: "Manage Pages",
displayField: 'navigation_title',
rootVisible: false,
animCollapse: false,
animate: false,
columns: []
});
pagesTreeGrid.expandAll();

};

}).call(this);


JSON Data Source:





{
"pages": [
{
"id": 1304,
"public_path": "/home",
"navigation_title": "Home",
"pages": [

],
"created_at": "2014-05-09T14:54:26.902-05:00",
"updated_at": "2014-05-13T10:05:15.712-05:00",
"leaf": true,
"allow_destroy": false
},
{
"id": 1328,
"public_path": "/privacy-policy",
"navigation_title": "Privacy Policy",
"pages": [

],
"created_at": "2014-01-13T00:00:00.000-06:00",
"updated_at": "2014-01-13T00:00:00.000-06:00",
"leaf": true,
"allow_destroy": false
},
{
"id": 1329,
"public_path": "/terms-of-service",
"navigation_title": "Terms of Service",
"pages": [

],
"created_at": "2014-01-13T00:00:00.000-06:00",
"updated_at": "2014-01-13T00:00:00.000-06:00",
"leaf": true,
"allow_destroy": false
},
{
"id": 1330,
"public_path": "/parent-page-1",
"navigation_title": "Parent Page 1",
"pages": [
{
"id": 1331,
"public_path": "/parent-page-1/child-page-1",
"navigation_title": "Child Page 1",
"pages": [
{
"id": 1332,
"public_path": "/parent-page-1/sub-child-page-1",
"navigation_title": "Sub Child Page 1",
"pages": [

],
"created_at": "2014-05-17T18:11:34.083-05:00",
"updated_at": "2014-05-17T18:11:34.083-05:00",
"leaf": true,
"allow_destroy": true
}
],
"created_at": "2014-05-17T18:10:39.802-05:00",
"updated_at": "2014-05-17T18:10:51.914-05:00",
"leaf": false,
"allow_destroy": true
}
],
"created_at": "2014-05-17T18:10:06.817-05:00",
"updated_at": "2014-05-17T18:10:06.817-05:00",
"leaf": false,
"allow_destroy": true
},
{
"id": 1333,
"public_path": "/parent-page-2",
"navigation_title": "Parent Page 2",
"pages": [
{
"id": 1334,
"public_path": "/parent-page-2/child-page-2",
"navigation_title": "Child Page 2",
"pages": [

],
"created_at": "2014-05-17T18:12:09.432-05:00",
"updated_at": "2014-05-17T18:12:09.432-05:00",
"leaf": true,
"allow_destroy": true
}
],
"created_at": "2014-05-17T18:11:49.442-05:00",
"updated_at": "2014-05-17T18:11:49.442-05:00",
"leaf": false,
"allow_destroy": true
}
],
"success": true,
"metaData": {
"id": "id",
"totalProperty": "metaData.total_records",
"root": "pages",
"fields": [
{
"name": "navigation_title"
},
{
"name": "id",
"type": "int"
},
{
"name": "created_at",
"type": "datetime"
},
{
"name": "updated_at",
"type": "datetime"
}
],
"total_records": 5,
"total_pages": 1
},
"columns": [
{
"dataIndex": "navigation_title",
"xtype": "treecolumn",
"text": "Title",
"sortable": false,
"hideable": false,
"lockable": true
},
{
"dataIndex": "id",
"text": "ID",
"sortable": false,
"hideable": true
},
{
"dataIndex": "created_at",
"text": "Created At",
"xtype": "datecolumn",
"format": "Y-m-d",
"sortable": false,
"hideable": true
},
{
"dataIndex": "updated_at",
"text": "Updated At",
"xtype": "datecolumn",
"format": "Y-m-d",
"sortable": false,
"hideable": true
}
],
"actions": {
"view": true,
"edit": true,
"delete": true
}
}

nathantp
19 May 2014, 10:09 AM
Is it possible that this bug is related to how I have my store setup to read the "pages" nodes from the json store?