View Full Version : Add a preload to treegrid

18 Oct 2013, 6:38 AM
I'm a newbie of extjs4. I've starting from the "treegrid example" code for create my customized json file viewer. It works fine, but it's so much slowly, cause the php preprocessing that generated the json text. Now, i need to add a preload bar o preload image to the grid.

What can I do?

This is my source code (the php file transform in a json file):

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script language="Javascript" src="functions.js"></script>
<script language="Javascript" src="overlib.js"></script>

<script type="text/javascript" src="ext4gpl/bootstrap.js"></script>

$(function() {
$( "#start").datepicker({
dateFormat: "yy-mm-dd"

$(function() {
$( "#finish" ).datepicker({
dateFormat: "yy-mm-dd",

top: 180px;

<script type="text/javascript">


Ext.onReady(function() {
//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'ordine', type: 'string'},
{name: 'importo', type: 'currency'},
{name: 'righe', type: 'float'},
{name: 'data', type: 'data'},
{name: 'note', type: 'string'}

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
//the store will get the content from the .json file
url: '<?=$jsonUrl?>'
folderSort: true

Ext.define("My.LoadMask", {
extend: "Ext.LoadMask",

constructor: function(comp, config) {
var patch = false;
if (!comp.zIndexManager) {
patch = true;
comp.zIndexManager = {};


if (patch) delete comp.zIndexManager;

onDestroy: function() {


//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: '<center><span style="font-variant:small-caps">Riepilogo ordini per agente</span></center>',
width: "100%",
height: "87%",
renderTo: Ext.getBody(),
collapsible: false,
useArrows: false,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: false,
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Agente / Cliente',
flex: 2,
sortable: true,
dataIndex: 'ordine'
text: 'Importo &euro;',
flex: 0.8,
dataIndex: 'importo',
sortable: true
text: 'N.Righe',
flex: 0,
dataIndex: 'righe',
sortable: true
text: 'Data',
flex: 0.8,
dataIndex: 'data',
sortable: true
text: 'Note',
flex: 2,
dataIndex: 'note',
sortable: false



21 Oct 2013, 10:47 AM
UP. Thanks

Gary Schlosberg
25 Oct 2013, 5:42 AM
If you preload all of the data, won't it take that much longer for the page to load?

25 Oct 2013, 5:49 AM
Yes, that's not a problem.
Just I need to show the loading bar.