So i tried ext js grid. Since extjs renders the grid alone and looks a lot better then my grids which are done with smarty, html table and css.

A good grid should

• Paginate
• Filter
• Sort
• Edit ??? (maybe)

To make an extjs grid you need 3 pieces of code. Store, Columns and the Grid its self. Since Zend framework DB model component has some information we can use, I tried to automate a piece of it.

Not to forget, you have to create models for the tables that you want to use. The extended zend_db_table will create a .js file for us which includes the store and the columns model for our grid. After the file is created we can manually edit and change it to fit our needs, like hiding some columns or different formating.

The Store

I also extended the zend_db_rowset to return json data for its rowset, so i do use the Ext.data.JsonStore. it looks like this.

var xmlStore = new Ext.data.JsonStore({
	url: '/some/index/xml-list/', // here we have an action in some module, index controller
	fields: xml_st, // created via zend_db_table
	totalProperty: 'count', // calculated from zend_db_table
	root: 'xml' // allways the table name, xml here is not the output format!!!
});

Now the created fields from zend_db_table. Also not to forget we have to include the created files from zend_db_table.

// this is created from zend_db_table.
var xml_st = [
	{name: 'xml_id', type: 'int'},
	{name: 'created_on', type: 'date', dateFormat: 'Y-m-d H:i:s'},
	{name: 'updated_on', type: 'date', dateFormat: 'Y-m-d H:i:s'},
	{name: 'xml_name', type: 'string'},
	{name: 'xml_description', type: 'string'},
	{name: 'status', type: 'int'}
];

Because we have the information of the field from mysql and zend_db_table we can create this file. So if you would need some more improvement you could edit the created file and add some more meta data.

The Column Model

We can also create some basic information about the columns with the meta data from mysql for the table.

// this is created from zend_db_table
var xml_cm = [
	{header: 'xml_id', dataIndex: 'xml_id', id: 'xml_id', resizeable: true, sortable: true, align: 'right'},
	{header: 'created_on', dataIndex: 'created_on', id: 'created_on', resizeable: true, sortable: true, renderer: Ext.util.Format.dateRenderer('d.m.Y')},
	{header: 'updated_on', dataIndex: 'updated_on', id: 'updated_on', resizeable: true, sortable: true, renderer: Ext.util.Format.dateRenderer('d.m.Y')},
	{header: 'xml_name', dataIndex: 'xml_name', id: 'xml_name', resizeable: true, sortable: true},
	{header: 'xml_description', dataIndex: 'xml_description', id: 'xml_description', resizeable: true, sortable: true},
	{header: 'status', dataIndex: 'status', id: 'status', resizeable: true, sortable: true, hidden: true}
];

In this example i added the information about hidden:true. You can still change some other setting.

The Grid

// this is all we have to write to make a basic grid
var xmlGrid = new Ext.grid.GridPanel({
	renderTo: 'xml_div',
	title: 'XML',
	store: xmlStore,
	columns: xml_cm, // the created column model
	stripeRows: true,
	border: true,
	frame: true
});

So this would be the basic grid. in next series we also are going to add the pager, grouping, filter and maybe some other stuff and demonstrate how it work together with zend_framework.

The PHP Part

This is the basic extend for the zend_db_table. If you do not want to use this class you can use (copy & paste) the code. I do not need any credits.

We have here to function one of them is getCount(). This function hepls us to get the count for the rowset object and the information is also used for the pager.

extWriteGridSettings(), will write a .js file for its model. So if you have a model called xml it will write xml_gs.js to the folder which you set (GridSettings).

getAdapter()->fetchOne("select count(*) as count from {$this->_name} where $where");
		} else {
			$count = $this->getAdapter()->fetchOne("select count(*) as count from {$this->_name}");
		}

		return $count;

	}

	public function extWriteGridSettings() // write some settings
	{

		$cm = "var {$this->_name}_cm = [\n";
		$st = "var {$this->_name}_st = [\n";

		foreach($this->_metadata as $index => $arr) { // the metadata

			switch($arr['DATA_TYPE']) {
				case 'int':
					$type = 'int';
					$cmExtra = ", align: 'right'";
					break;
				case 'mediumint':
					$type = 'int';
					$cmExtra = ", align: 'right'";
					break;
				case 'timestamp':
					$type = 'date';
					$stExtra = ", dateFormat: 'Y-m-d H:i:s'";
					$cmExtra = ", renderer: Ext.util.Format.dateRenderer('d.m.Y')";
					break;
				case 'decimal':
					$type = 'auto';
					$cmExtra = ", align: 'right', renderer: Ext.util.Format.Currency";
					break;
				case 'varchar':
					$type = 'string';
					break;
				case 'tinyint':
					$type = 'int';
					break;
				case 'text':
					$type = 'string';
					break;
				default:
					$type = 'auto';
					break;
			}

			if(strlen($this->sortables[$index]) > 0) {
				$cmArr[] = "\n\t{header: '{$this->sortables[$index]}', dataIndex: '$index', id: '$index', resizeable: true, sortable: true{$cmExtra}}";
			} else {
				$cmArr[] = "\n\t{header: '$index', dataIndex: '$index', id: '$index', resizeable: true, sortable: true{$cmExtra}}";
			}

			$stArr[] = "\n\t{name: '$index', type: '$type'$stExtra}";

			$type = '';
			$stExtra = '';
			$cmExtra = '';

		}

		$cm .= implode(', ', $cmArr)."\n\n];\n\n";
		$st .= implode(', ', $stArr)."\n\n];";

		$cf = Zend_Registry::get('config');

		$fp = fopen($cf->path->file.'pub/js/ext-cache/'.$this->_name.'_gs.js', 'a'); // write where ever you wish

		fwrite($fp, $cm.$st);

		fclose($fp);

		chmod($cf->path->file.'pub/js/ext-cache/'.$this->_name.'_gs.js', 0777);

	}

}

All of my models extend the reverse_db_table so i have allways the functions. Just use once $model->extWriteGridSettings(); and it will write it do disk.

Now the rowset extend.

_table->getCount($where);

		$count = 0;
		foreach($this->_data as $key => $value) {
			$arr[$this->_table->info('name')][$count] = $value;
			$count++;
		}

		if($count == 0) {
			$arr[$this->_table->info('name')];
		}

		return Zend_Json::encode($arr);

	}

}

Now some usage examples.

public function xmlListAction()
{
	$this->_autoRender = false; // my internal funciton to stop smarty from rendering
	$xmlModel = new xmls(); // the model
	$rs = $xmlModel->fetchAll();
	echo $rs->toExtJson(); // the record set
}

This is a simple action in zend_controller.

Thats it for today. I am very sorry of my english and writing skills but i will answer the comment (maybe :-) ).

The first part of the project was not meant to be public so i limited my work to Firefox. But after a while the public part started and i wanted to use some ready made widgets in smarty (like my address widget with 5 chained select boxes). When i tried it in IE 6 it did not worked.

Here is how it looks like. The next select box will be loaded onchange of the parent select box.

       - - - - - - - - - - - - -

function loadSomeMore() {
	if($F('some') != 'none') {
		var opt = {
			onSuccess: function(t) {
				Element.update('someMore', t.responseText);
			}
		}
		new Ajax.Request('/ajax/address/someMore/' + $F('some') + '/', opt);
	}
}

I started to look on http:\\www.google.com for a similar problem. I found the problem with IE 6, but there was no real fix to the problem. The problem was Element.update() of prototype. There was a fix (i think on rails mailing list) which hacks protoype.js. It works but it replaces the whole select box instead of changing only the options. So if you change also the select tag you loose the onchange trigger so you cannot trigger the next select box.

So since i knew the name of function which should be called via on change. I changed the functions with Element.replace.

function loadSomeMore() {
	if($F('some') != ''none) {
		var opt = {
			onSuccess: function(t) {
				$('someMore').replace('
' + t.responseText + '

');
			}
		}
		new Ajax.Request('/ajax/address/somevenMore/' + $F('some') + '/', opt);
	}
}

So if you want to make chained selects with prototype, instead of updating the select box options just replace the whole select box with its options. So the response from ajax would be:

instead of

I am not sure if the example above would work, the id’s are mixed. But otherwise the script works fine. The next functions for next child in chained select is almost copy paste, so it is fast to make.

Have fun.

Then i started to look at ZEND FRAMEWORK. It is a lot more flexible then cakephp and i also didnt needed scafolding. So after learning about a week I started to work on the project. In the begining it went very well, but after 2 month the pain started. I just got to lazy and depended on the framework.

On my earlier projects I allways wrote a small framework which would help me to work through the project. If i had to write something more than twice, I decided to write a function or even better an object.

When i work with zend framework, i just skipped the first process and started to write hardcoded in to the actions. Now as things get more complicated I have a great lack of my usual objects and classes.

So i learned, never get layz of writing the helpers of a project. Take around 30% in the begining of a project for writing your own objects. This will also help you to solve problems even before they occur.

So i decided to make the form look smaller. I wanted to hide some fields until they are not checked or used. I stared to program at 21:40.

1. Scenario 21:50 (after some cigarets and jagermeister)

I have some background experience with http://mootools.net and http://script.aculo.us. Because I allready use scriptticolumous in the web site i decided to use scriptaulimoumus but I still don’t know how to spell it or read (always have to search on google.com that he corrects my misspelling).

After like an half an hour reading i tried to use the toggle function. And some code which i would write would look like:

 Click me to see something

I think this is pretty straight forward. What it does, on the beginning the checkbox is not checked and the div is not shown so if you would click on the checkbox it would be checked and the layer would be shown. Basiclly it works, if you are smart and with no adrenalin and no stress. But for me no way, as soon as i see something to click i would click on it like 5 billion times a second to make it crash or to relax. So after clicking a few million times i saw that the checkbox was checked but the div was not shown and some more million clicks the checkbox was not checked and the div was shown. :-( no shit.

2. Scenario 22:30(some more cigarets and …)

What now? I decided to handle the toggle function on my own. Now the new code:

 Click me to see something

I thought this might work and started to click on it 5 billion times a second same thing they are not syncronized as they should be. :-( kiss my ass.

3. Scenario 11:50 (more smoke)

There are some more smaller in scenarios in the story but will just skip them not make it so exciting huh. So i decided to make a fuse which would tell me if everything is allready done. So this is the last one.

I started to read the callback functions and found beforeStart and afterFinish. So would before start make a variable true and after finish make the variable false. In that way i would know when i could make another Effect call. in the afterFinish callback function i would also implement a checking for the checkbox which would tell me if it is checked or not and show the div or not. In this way they will be always syncronized.

 Click me to see something