View Full Version : New to ExtJS - Make TreeGrid POST a form

27 Jan 2010, 12:30 PM

I'm new to ExtJS and I am trying to figure out a bit how things work by using the TreeGrid since I need just that in the current project I'm working on.

I have an existing HTML form on the page that the users can fill to pre-filter the data. When they hit 'Apply Filter' that's when I'd like to show the TreeGrid with the data filtered based on that form.

So I noticed that the request made to the dataUrl property is made using a POST, but I could not find how to specify an existing HTML to POST.

I read the docs and looking at Ext.Ajax.request I saw I could specify on that call a form property, but could not find out how I would have that option set within the TreeGridLoader class.

So what I ended-up doing is to sub-class both TreeGrid and TreeGridLoader so I could change the necessary functions to add a formPost property. Although I'm guessing that there probably is another way to achieve this that I'm missing because I am still trying to figure out how ExtJS works (the loaders, stores, etc.). Plus I believe that the way I handle the loader in my X3POTreeGrid initComponent might actually be breaking something if I compare with the loader initialization code in TreeGrid.js.

Also, Any help on how this should be done would be very appreciated! Thanks

Here's a running example http://testx3.emaint.com/treegrid/treegrid.htm although that server is not very stable here's also my code:


<title>TreeGrid Test</title>

<!--ExtJS CSS includes-->
<link rel="stylesheet" type="text/css" href="scripts/extjs/resources/css/ext-all.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="scripts/extjs/ux/treegrid/treegrid.css" rel="stylesheet" />



<div id="filterdiv">
This form is normally built via a custom AJAX server-side form builder
<form id="myFilterForm" method="post">
<div>Supplier <input type="text" name="supplier" value="acme"></div>
<div>Status <select name="status"><option>Open</option><option>Closed</option></select></div>
<div><input type="button" value="Apply Filter" onclick="loadTree()" /></div>

<div id="treegrid"></div>

<!--ExtJS includes-->
<script type="text/javascript" src="scripts/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="scripts/extjs/ext-all.js"></script>

<!--ExtJS TreeGrid includes-->
<script type="text/javascript" src="scripts/extjs/ux/treegrid/TreeGridSorter.js"></script>
<script type="text/javascript" src="scripts/extjs/ux/treegrid/TreeGridColumnResizer.js"></script>
<script type="text/javascript" src="scripts/extjs/ux/treegrid/TreeGridNodeUI.js"></script>
<script type="text/javascript" src="scripts/extjs/ux/treegrid/TreeGridLoader.js"></script>
<script type="text/javascript" src="scripts/extjs/ux/treegrid/TreeGridColumns.js"></script>
<script type="text/javascript" src="scripts/extjs/ux/treegrid/TreeGrid.js"></script>

<!--My app - normally in an external file-->
<script type="text/javascript">
Ext.ux.tree.X3POTreeGrid = Ext.extend(Ext.ux.tree.TreeGrid, {

initComponent : function() {

// initialize the loader
var l = new Ext.ux.tree.X3POTreeGridLoader({
dataUrl: this.dataUrl,
requestMethod: this.requestMethod,
store: this.store,
postForm: this.postForm
if(l) {
l.createNode = function(attr) {
if (!attr.uiProvider) {
attr.uiProvider = Ext.ux.tree.TreeGridNodeUI;
return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
this.loader = l;

Ext.ux.tree.X3POTreeGridLoader = Ext.extend(Ext.ux.tree.TreeGridLoader, {
requestData : function(node, callback, scope){
if(this.fireEvent("beforeload", this, node, callback) !== false){
var args = this.getParams(node);
args.push(this.processDirectResponse.createDelegate(this, [{callback: callback, node: node, scope: scope}], true));
this.directFn.apply(window, args);
this.transId = Ext.Ajax.request({
url: this.dataUrl||this.url,
success: this.handleResponse,
failure: this.handleFailure,
scope: this,
form: this.postForm,
argument: {callback: callback, node: node, scope: scope},
params: this.getParams(node)
// if the load is cancelled, make sure we notify
// the node that we are done
this.runCallback(callback, scope || node, []);

function loadTree(){


var tree = new Ext.ux.tree.X3POTreeGrid({
title: 'Purchase Orders',
width: 500,
height: 300,
renderTo: 'treegrid',
enableDD: true,

header: 'Supplier / PO / Item',
dataIndex: 'group',
width: 230
header: 'Qty',
width: 100,
dataIndex: 'qtyord',
header: 'Item',
width: 150,
dataIndex: 'descrip'
postForm: 'myFilterForm',
dataUrl: '../wc.dll?x3~custom~getjsondata~&FILENAME=testjson'