mobile and gis dev notes » ExtJS

ExtJS: Window Snippet

rupert — Wed, 26 Mar 2008 23:03:19 +0000

Just a quick example on creating floatable windows

Note that renderTo: ‘document.body’ would result in an error, use renderTo: document.body instead

Aptana Impressions

rupert — Sat, 15 Mar 2008 17:25:01 +0000

I recently downloaded Aptana Studio 1.1 Community Edition and have been using it mostly for my Javascript/ColdFusion development.

Intellisense for ExtJS by using com.extjs.ext.2.0_1.0.0.00000.jar from the ExtJS blog. Umm, I am hoping someday OpenLayers can provide a similar jar file to provide code assist.
I like the fact that it could clearly display an outline of my javascript objects but sometimes not for all.

But one of the major problems I encountered was the startup. Sometimes, for some unknown reason, Aptana cannot start using the executable it provided during the install. However, I was able to weed that problem out by instead launching it from startup.jar. All of these is documented from Aptana’s JIRA ticket.

1. Downloaded and install Aptana

2. Watched Aptana TV Overview

3. Installed cfeclipse http://www.cfeclipse.org/update

4. Installed viPlugin http://satokar.com/ (Note that the viPlugin would not work with files = *.html)

5. Added the extjs2.0 code assist

ExtJS and OpenLayers

rupert — Tue, 19 Feb 2008 00:45:18 +0000

It seems that ExtJS and OpenLayers does not blend well together. One of the bug biters that hit me was the way ExtJS was handling arrays. It would be wise for OpenLayers to be agnostic of these frameworks.

for( var i in blocks ) should be transformed to for( var i = 0; i &lt; blocks.length; i++)

I believe OpenLayers Ticket#1362 closely resembles this bug. Thanks to pgiraud for pointing me to the right direction.

ExtJS QuickTip: Display other levels of a JSON object in a Grid

rupert — Mon, 18 Feb 2008 15:08:39 +0000

You can display an item anywhere in a JSON heirarchy/level in a Grid by using dot notation. I am beginning to like JSON as it is simply practical and amazing. To fully understand, please see geometry.type as an example.

{ "type": "FeatureCollection", "recordcount":6, "features": [ { "type":"Feature", "geometry":{ "type": "MULTIPOLYGON", "coordinates": [[[[116.368603,39.944314],[116.381069,39.94464],[116.388765,39.940265],[116.390376,39.939124],[116.391203,39.934381],[116.391784,39.930743],[116.387262,39.930638],[116.387507,39.93289],[116.383032,39.932688],[116.382581,39.933204],[116.37197,39.940531],[116.368603,39.944314]]]] }, "gid":16055, "cn_name":"后海", "py_name": "hou hai" } , { "type":"Feature", "geometry":{ "type": "MULTIPOLYGON", "coordinates": ....}

Here is the DataStore…

cs.GridPlace = function(){
    var _placeDataStore = new Ext.data.Store({
        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'features',
            totalProperty: 'recordcount',
            id: 'gid',
            fields: [
                'cn_name', 'py_name', 'geometry.type'
            ]
        })
    });
 
    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var cm = new Ext.grid.ColumnModel([{
           id: 'gid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "CN_NAME",
           width: 100,
           dataIndex: 'cn_name'
        },{
           id: 'gid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "PY_NAME",
           width: 100,
           dataIndex: 'py_name'
        },{
           id: 'gid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "GEOMTYPE",
           width: 100,
           dataIndex: 'geometry.type'
        }
    ]);

ExtJS Notes

rupert — Fri, 04 Jan 2008 16:19:03 +0000

1. How to test Ext from the extjs/docs?
Ext.get(document.body).update('

‘)

2. Node cannot be inserted at the specified point in the hierarchy code: 3
Answer: Possible invalid nesting of id elements within a panel or div. Check if id is the same with contentEl in a panel. For example:

//in my javascript Layout.js
{
    id: 'pnlPOIList', //should be renamed to foo-pnlPOIList just to distinguish it from pnlPOIList
    region: 'west',
    contentEl: 'pnlPOIList',
    title: 'POIList',
    width: 300,
    collapsible:true,
    floatable:false,
    autoScroll: true
}
 
//in my index.html
<p id="east">
p><p id="pnlMoreInformation"><cfinclude template="pnlMoreInformation.cfm">cfinclude>p>

3. A has no properties
Ext.Container=Ext.extend(Ext.BoxComponent,{autoDestroy:true,defaultType:"panel",...
Answer:Check the object inside the definition of an Ext Component. It may be a different object.

4. How to debug ext app on IE?
Answer: This should be a javascript post instead of Ext but I’m posting it anyway. When troubleshooting javascript in IE, be careful with open-ended definition with commas. Firefox might be forgiving but not IE. Meaning…

	var config = {
			id: taskbarButtonID,
			text: taskbarText,
			iconCls: iconstyle,
			handler: function(){
				var mywindow = Ext.getCmp(windowID);
				mywindow.setVisible( !mywindow.isVisible() );
			},
		};

5. Javascript Plugin for Eclipse. For more information, please visit ExtJS Blog: IDEs, plugins and tools for Ext JS 2.0