More modExt woes...

275 Posts

skndn60 Reply #1, 16 years ago

I noticed that (almost?) all ExtJs components start with something like:

Application.ExtJsClass.Class = function(config) {
...some code...

For example for modExtra:

modExtra.grid.Items = function(config) {
... more code ...

Is that required syntax by ExtJs?

I’m trying to rewrite the modExtra grid to use a tree view.

There’s a tutorial on this on the ExtJs site but I don’t get it to work in MODx.

MODx Revolution / MAMP / OS X

4,149 Posts

splittingred Reply #2, 16 years ago

Take a look at how some of the trees are done in the manager, or in other Extras, such as Gallery or Discuss.

shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com

275 Posts

skndn60 Reply #3, 16 years ago

Used the album implementation of Gallery as a reference.

Got it eventually working.

Thanks for the tip.

Cheers

MODx Revolution / MAMP / OS X

275 Posts

skndn60 Reply #4, 16 years ago

Ok, I got a basic version iof my Tree view working however some things are not working correctly:

- Some nodes do not respond to mouse action
- Only the last node added to the model seem to respond to mouse actions.

Another thing I noticed is that clicking for example "Property 1" node, actually expands / collapses "Property2". I have attached a screenshot of the tree.

My getnodes.php looks like this:

<?php
$requestedNode = "";
if (isset($_REQUEST["node"])) {
	$requestedNode = $_REQUEST["node"];
}
error_log($requestedNode);

$treeNodes = new TreeNodes();
if ('root' == $requestedNode) {
	$treeNodes->add("node-cottages","Property 1","",false,false,"","");
	$treeNodes->add("node-cottages","Property 2","",false,false,"","");
}
else if ('node-cottages' == $requestedNode) {
	$treeNodes->add("node-year","2010","",false,false,"","");
	$treeNodes->add("node-year","2011","",false,false,"","");
	$treeNodes->add("node-year","2012","",false,false,"","");
}
else if ('node-year' == $requestedNode) {
	$treeNodes->add("node-month","January","",false,false,"","");
	$treeNodes->add("node-month","February","",false,false,"","");
	$treeNodes->add("node-month","March","",false,false,"","");
	$treeNodes->add("node-month","April","",false,false,"","");
	$treeNodes->add("node-month","May","",false,false,"","");
	$treeNodes->add("node-month","June","",false,false,"","");
	$treeNodes->add("node-month","July","",false,false,"","");
	$treeNodes->add("node-month","August","",false,false,"","");
	$treeNodes->add("node-month","September","",false,false,"","");
	$treeNodes->add("node-month","October","",false,false,"","");
	$treeNodes->add("node-month","November","",false,false,"","");
	$treeNodes->add("node-month","December","",false,false,"","");
}
else if ("node-month" == $requestedNode) {
	$treeNodes->add("node-tariff","02-01-2010 - 08-01-2010 Week: 450 3Days: 310 4Days: 360 5Days: 385 6Days: 424","",true,false,"","");
	$treeNodes->add("node-tariff","09-01-2010 - 15-01-2010 Week: 450 3Days: 310 4Days: 360 5Days: 385 6Days: 424","",true,false,"","");
}
 
return $treeNodes->toJson();


class TreeNode {
	public $text = "";
	public $id = "";
	public $iconCls = "";
	public $leaf = true;
	public $draggable = false;
	public $href = "#";
	public $hrefTarget = "";

	function  __construct($id,$text,$iconCls,$leaf,$draggable,$href,$hrefTarget) {
		$this->id = $id;
		$this->text = $text;
		$this->iconCls = $iconCls;
		$this->leaf = $leaf;
		$this->draggable = $draggable;
		$this->href = $href;
		$this->hrefTarget = $hrefTarget;   
	}   
}

class TreeNodes {
	protected $nodes = array();

	function add($id,$text,$iconCls,$leaf,$draggable,$href,$hrefTarget) {
		$n = new TreeNode($id,$text,$iconCls,$leaf,$draggable,$href,$hrefTarget);
		$this->nodes[] = $n;
	}

	function toJson() {
		return json_encode($this->nodes);
	}
}

So, first I figure out which type of node has been clicked and then I create a set of child nodes for that type and return that as a Json array. So root has "property" children, properties have "year" children, years have "month" children and months have "tariff" children. Tariff nodes are leafs and don’t have any children. In the final version the tariff information will be retrieved from the database. It’s hard coded here just for test purposes.

Sorry for the really long post, but I’m rather stuck at this point.

Anybody got some clues as to what I’m doing wrong? Very much appreciated!!

MODx Revolution / MAMP / OS X

4,149 Posts

splittingred Reply #5, 16 years ago

Could you post the JSON output that’s being sent from your PHP script generating the nodes?

shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com

275 Posts

skndn60 Reply #6, 16 years ago

I’ve outputted the JSON string to a log just before it’s being send to the client. These are the resulting entries:

[21-Sep-2010 17:22:12] 
[21-Sep-2010 17:22:12] [{"text":"Katies cottage, Glendale","id":"node-cottage","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"Eilean Mor cottage, Dunvegan","id":"node-cottage","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null}]
[21-Sep-2010 17:22:37] 
[21-Sep-2010 17:22:37] [{"text":"2010","id":"node-year","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"2011","id":"node-year","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"2012","id":"node-year","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null}]
[21-Sep-2010 17:22:41] 
[21-Sep-2010 17:22:41] [{"text":"January","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"February","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"March","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"April","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"May","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"June","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"July","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"August","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"September","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"October","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"November","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null},{"text":"December","id":"node-month","iconCls":"","leaf":false,"draggable":false,"href":"","hrefTarget":"","pk":null}]

As far as I can see, it looks like the only last node on any level receives its children no matter what node I click:

+property 1
+property 2

click property 1 and then property 2 will expand:

+property 1
-property 2
+2010
+2011
+2012

MODx Revolution / MAMP / OS X

4,149 Posts

splittingred Reply #7, 16 years ago

That’s because all your nodes have the same ’id’ property. Those have to be unique, as it’s how Ext differentiates between the nodes.

shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com

275 Posts

skndn60 Reply #8, 16 years ago

Thanks, it work perfectly now.

MODx Revolution / MAMP / OS X

275 Posts

skndn60 Reply #9, 16 years ago

Just one more question:

From the request I notice that only the clicked node name is passed back to the server. If I want to backtrack which information that node encapsulated (property id, year, month), I must keep a collection of created nodes available on the server. I suppose I could use $_SESSION for that...

Would that be a proper way of doing this?

MODx Revolution / MAMP / OS X

275 Posts

skndn60 Reply #10, 16 years ago

After some thinking I decided to build the id of each node as the concatenated string of its predecessors in the hierarchy.

Upon a click event the PHP snippet parses the id and retrieves all relevant id’s from previous levels.

Thanks again for your help.

MODx Revolution / MAMP / OS X