My God, what have I done - Using ExtJS

[crafter]

I'm halfway through my project using ExtJS for the admin UI portion and a PHP framework for the server portion and public UI portion.

Problem is, a month ago, I was halfway!. Now I keep asking myself what progress I've really made, and to top that, I have a client that is slowly losing patience with my inability to deliver.

I know what your'e gonna think, I'm stupid; I need to learn Javascript; there's a learning curve; I must serach the forum; as son on. I accept fully that there will be steep learning curve. I have consulted the documentation, forums, examples, wikis and blogs extensively. However, my experience is just painful.

While I assert that the framework itself it really great, and is making great inroads into the hstory of web-baed applications, I have to make the following points:
- The framwork is too large
To illustrate this, take any part of the framework - perhaps grids because it gets a lot of
attention in the forums. There are so many different things that detirmine how the grid
behaves. One would face a problem, look up a suggested solution xx, only to find that that one
failed to provide some parameter yyy.
- Too much coding is required.
Just coding a extform is such a painful exercise. I could take an ordinary HTML form, and convert
that into heaps of Javascript code. If I choose not to use Ext forms for my markup, , it seems like
I forgo the ability to submit the form the Ext way.
- Error handling is a pitb.
As an example, take the rendering a grid using json data. Works beautifully, But, introduce an
error in your Json and you are faced with a blank grid, with no idea what just happened. Why
should I be forced to use Firebug. The library should tell me what it is doing. (BTW, I DO use
firebug and I love it!),
- Great monolithic application
I'm coding a CMS type application with many "modules", all of which may not be accessed, but
I have to carry them along as a proper modular/conditional loading of code segments isn't
supported.

Let's get something straight out, I think Ext is great and will continue using it for my application, and probably for furture applications as well.

My problem is that even at this point simple things are taking me longer than it should. As a developer, I want to be spending more time addressing user related issues, At this stage I'm living the framework, not the application.

Perhaps I'm approaching my development wrong. I don't know. I'd like to hear otjer developer's experience.

I probably have made some wrong assumptions in this post. Please correct me, don't flame me!

[BernardChhun]

hey Crafter,

I don't think you are stupid or anything dude. I'd like to know what your project needed though as I believe you might have aimed too high on what you could accomplish with ExtJs.
Let me answer on to some of your points :

"The Framework is too large" : True. you can't just tackle any widget and think it would be easy from the start. Some of them are, but most of them requires that you study every part of the widget. My trick here was to use 3 or 4 widgets only in my project. I drew lots of UML graphs and printed a whole bunch of docs pages to get a general view of a widget. Now I may say that I'm getting much better with the TreePanel, the GridPanel and the whole layout thingy.

"Too much coding is required": Compared to what? I strongly believe it depends on what widget you are working with and the amount of knowledge you have for it. I'm pretty sure that building up the same TreePanel with Prototype and having the same functionnalities is much scarier.

"Error handling is a pitb": you know there's a Try Catch sentence right? as for forcing the user to use Firebug, I only use it for checking the DOM out or checking XHR calls. I also use a good IDE that points my syntax errors out. As for errors using the library itself, it's usually my experience with it that tells me where my errors are.

"Great monolithic application":
loading new code segments is supported. You may inject whatever javascript code in there and eval it easily.


Anyways, I've been working with ExtJs since last october/november I believe. And it made me love the javascript language like I never loved it before.

[crafter]

Thanks Bernard

My application is a simple CRUD for a CMS type system. Nothing special. But your'e right that I'm comparing my ExtJs to my current php-render-my-screen method.

I think one of the points of departure that Ext takes is that takes control of the UI (hence the 20-lines-of-JS-code-for-a-login-form screnario, compared to modyfing an existing HTML markup page. Perhaps I should be looking at it as providing "widgets" or "controls", rather than a library that will modify my div into a so and so.

I can tell you that currently my server development is using an MVC approach where the front end are mostly dumb screens. Using Ext, however, places a lot more control in the hands of the browser. Perhaps I need to conquer this hurdle and relook at my development framework.

[bitdifferent]

Hi there crafter,

I know how you feel. I've just completed two concurrent commercial projects using Ext and climbing the learning curve meant that I delivered a bit late to both of my clients. Like you, I made extensive use of the documentation and other resources available. However, on many occasions I felt like I was playing some ancient text adventure where I knew that I had to use the golden feather to tickle the pink pig's nose, but couldn't find the exact syntax to express that to the game, if you see what I mean.

However, I'm not sure that I would lay much of the blame for this with Ext itself. Here's some thoughts off the top of my head that might help you:

Beef up your javascript knowledge

I *thought* I knew pretty much everything about JS. I'd done some relatively complex UI stuff in the days before libs like prototype, scriptaculous and so on - including building my own dhtml grid control with sortable and filterable columns - but still, a good proportion of my hassles were about JS itself, either stuff I'd forgotten or never really learned.

Hang out on #extjs

When you see a query you know the answer to, help out. The guys in there aren't keeping score (are you?!?) but there's some kind of cosmic karma principle at work there. Sometimes only synchronous help, helps. Bernard (who's just replied while I'm typing this, I see) was a big help in particular - but so were many other people. (BTW, I'm "matzie" on IRC).

Document what you learn as you learn it

Every time I got the answer to something that had puzzled me for more than a few minutes, I documented it, and if I thought it could help others, I posted a message about it here on the forum. I'm just starting a new project now, and I will have slipped down the learning curve again (curve? cliff?) - but I'll have my own notes to help this time.

Leverage what you know better already

I've done loads of stuff in PHP and (for better or worse) in Smarty templates. I started generating my JS from smarty templates and encapsulating some Ext features that I was using frequently as Smarty plugins. Since my main app logic was in PHP, it meant that I only squirted the JS I needed down tot the client. (Of course, this also meant that I lost out on browser caching of unchanged .js files; hmm, not quite sure if I'm happy about that, but it does enable some things that would otherwise have been impossible). Anyway, It worked for me, and whatever you know better that Ext, see if you can use it to help.

How do you eat an elephant? One bite at a time

By this I mean (like Bernard said) don't try and use every feature of every widget in your first project. Or just, "don't be too ambitious."

One of my recent projects, Find a Sport Buddy (http://www.findasportbuddy.co.uk) , uses Ext very heavily. The site is intended to let members find other members, within a set radius of their own postcode, who like the same sports as you do, at a certain level of expertise. It would be a pretty difficult problem in itself, without the fancy UI (and the nightmare I had calculating distance from postcode!) But the UI features I had in mind were certainly *possible* but not practical for my level of experience with Ext.

For example, in one part of the app you have a tree view on the left hand pane and a grid on the right. You choose a sport from the categorised tree, drag it over to the grid, whereupon it appears as a new row, and one of the columns, which is a combo, starts editing immediately so you can specify your level of expertise with the sport you've just dragged acrosss. You can see this demo'd in one of the 'tours' on the site (number 2 I think).

Now, all this sounded great when I described it to my client, looked great in my wireframe mockups (Visio is my secret weapon for mockups BTW) but took about 4 x as long to code as I expected. That's not Ext's fault, I don't think.

( I would love to have some kind of code generator though - to go from a VS type environment to generated Ext code would be brilliant )

Anyway, I have to crack on - hope these thoughts help a bit!

Matt Saunders
Bit Different Limited

[alien3d]

When i try started the yui 0.33.I change a lot of code until the 1.1 version.The stability between other third party javascript and error handling making myself more easier in the future.Some part of world there are programmer who ever think why need auto mask date textbox alphanum or date which only can key in the textbox which sometimes make easy for customer don't doing the mistake.For conclusion,A little big bunch code wll make you life easier for database mangament data.

[evant]

I'm currently working on a large system using Ext.

2 things we've done that have been highly useful:

1) Server side wrappers - This one is debateable, however we've had great success with writing .NET controls to wrap around grids, toolbars, trees etc. It provides better integration with your server side language and saves a lot of headaches.

2) Componentizing javascript - A majority of the things in our application have a west region with a tree and a center region with lots of panels. We abstracted a lot of the logic out of this, so now to create a new 'section' you just have to instance an object, pass in a few objects and *poof* it "just works". While you have to take the extra time to genericize these things, the long term payoff is astounding.

HTH.

[Wolfgang]

I am working currently on 2 different projects and used Ajax technologie before to maniplate objects in the dom from the backend using Xajax which is a great tool.

Now i am switching over to Ext. The major differences:

Using "classic" WEB programming (in PHP or the like, w/wo tempate engines like Smarty:
- the gui is created from the backend and is in fact the page.
- typically only a click event is created on the client, passed to the server and creates there a new page.

Using "web 2.0" type of programming like with EXT:
- the gui is created by javascript (maybe except a skeleton based on div's or whatever).
- the page is typically loaded only once.
- events on the client trigger callbacks on the client and request data from server only when needed.
- datatransfer between client and server might be reduced to just passing data, not pages.

This means that the entire design is complete different.

Example: Form submit:
"Classic":
- pass data to server
- validate data
- handle errors if any on server and inform user (rebuild page)
- update data on server
- inform user (rebuild page)

Compared when using EXT as a "web 2.0" tool:
- validate data on the client
- pass data to server
- validate data against the server database
- handle errors if any on server and inform user (pass back only the data about whats wrong, no need to rebuild the page)
- update data on server
- inform user (again only pass back data, no need to rebuild the page)

MVC
If one used an MVC approach in a "classic" environment it works well.
But using EXT the question comes up:
- Where is my View?
- Where is my Controller?
...and from which point of view (client or serverside).

Now, parts of the controller function that were implemented on the serverside in a "classic" environment can/should now be implemented on the clientside in JS.

Simple example: Two grids having a master /detail relation ship
Clicking a row on a customer (mastergrid) shows the orders in the details grid.

Where are the classic controller and view components?

In EXT, a "rowclick" event in the mastergrid, could force an XHR request in the detailsgrids datastore. So the controller would be ... on the client.
When the detailsgrid updates, the server would just have to send a JSON or XML response. So where is the view component? I would say...on the client.

Only the Model part of the MVC concept would be similar to the "classic" concept.

So in the design phase, one needs carefully to think about where to do what.

In summary i thing that anyone starting with "Web 2.0" and EXT in particular, needs to understand that one has to deal with events, widgets, components and gui stuff, similar to writing a native event driven OS GUI application. The browser becomes a "fat client" where in that "classic" it was a sort of terminal.

The "pain" i sometimes feel is to really understand the various aspects/concepts of JS (why closures, whats scope?), CSS and the DOM / internals of how modern webbrowser works.
Beyond that it also takes time to really figure out on how a particular EXTcomponents or widgets works.

But...once the first results are visible, the effort really pays off :)

[manugoel2003]

( I would love to have some kind of code generator though - to go from a VS type environment to generated Ext code would be brilliant )

Well, I have an idea..... how abt starting an open source project for this...... I could contribute a little and later on it can be used as a major tool for developing in Ext...... and BTW, I am talking abt building that tool in Ext itself..... sounds logical to anyone?

[MikeV]

I was working on a project and I decided that I should use some AJAX style application instead of the regular PHP/Smarty combination.

I was sniffing around and once I've bumped into a screencast of ExtJS' Grid control and I fell in love with it immediately.

I didn't know JS very well so ExtJS was also my first major JS project. It was painful and I hated every moment working on it (in fact, I had to force myself to work on the client part).
I found that ExtJS was very complex and sometimes the documentation was lacking. Thanks to the IRC channel/this forum I got through - although a bit later than I would if it were a PHP only project. But the client absolutely loved it and I loved it too because such a GUI makes much more sense when it's interactive.

One of the things I didn't like was working with ExtJS' layout, I got the hang of it, but I still don't like it :)

Anyway, I've heard that other toolkits are way worse so I'm not complaining.

[crafter]

MVC
If one used an MVC approach in a "classic" environment it works well.
But using EXT the question comes up:
- Where is my View?
- Where is my Controller?
...and from which point of view (client or serverside).

I think Wolgang just encompassed the crux of my apparent depair.

BTW, manugoel, you siad:

Well, I have an idea..... how abt starting an open source project for this...... I could contribute a little and later on it can be used as a major tool for developing in Ext...... and BTW, I am talking abt building that tool in Ext itself..... sounds logical to anyone?

I have built an open source Code Generator, for the Code Igniter framework, written in PHP. I can;t see why this can't form the basis for the project.

Look here: http://www.datacraft.co.za/codecrafter/

[manugoel2003]

The link is not working

[alien3d]

Simple example: Two grids having a master /detail relation ship
Did you the actual e.g.For my current project i deal a lot of master and detail relationship.Befor i saperate the grid in master one page and the detail one page.

[Wolfgang]

Simple example: Two grids having a master /detail relation ship
Did you the actual e.g.For my current project i deal a lot of master and detail relationship.Befor i saperate the grid in master one page and the detail one page.

??? - i do not get what you mean?

@crafter
I am using codeigniter, too. Works very well.
Basically, i do the entire GUI stuff in Javascript / Ext. Codeigniter provides "just" the controller / model part and returns JSON for nearly any request - even errormessages.
So most of the time i use a simple view that is called 'to_json'.
I also wrote a simple wrapper to get path / url stuff from the $config array to the JS world.
This way i can setup URL / basepath etc. in codeignitor and have not deal with it in the JS world.
My project is more an application than a web site, so needs might be different.

Here some stuff i use when working with Codeignitor:

EXT view to integrate EXT:


<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
// path to ext with trailing /
$pathJsExt = $this->config->item('javascript_path_lib_ext');
?>

<link rel="stylesheet" type="text/css" href="<?=$pathJsExt?>resources/css/ext-all.css">

<script type="text/javascript" src="<?=$pathJsExt?>adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="<?=$pathJsExt?>adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="<?=$pathJsExt?>ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "<?=$pathJsExt?>resources/images/default/s.gif";
</script>


BASE view - setup vars from CI config in the JS world:


<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
?>
<?=add_style('main')?>
<script type="text/javascript">
// create standard GUI namespace objects
Ext.namespace('GUI', 'GUI.Main', 'GUI.Parts', 'GUI.Tools');

// See user config: base_config.php
Ext.namespace('Base');
// Example: "/myappdir/"
Base.baseUrl = "<?=base_url()?>";
// Basepath for JS includes
Base.pathJs = Base.baseUrl + "<?=$this->config->config['javascript_path']?>";
// Basepath for CSS includes
Base.pathCss = Base.baseUrl + "<?=$this->config->config['stylesheet_path']?>";
// Basepath for images
Base.pathImg = Base.baseUrl + "<?=$this->config->config['image_path']?>";
// Example: "/myappdir/index.php?" - important is the "?"!!!
Base.siteUrl = "<?=site_url()?>" + "?";
// Example: "/var/www/html/ci/system/" - usally not needed and therefore should not be exposed
//Base.systemPath = "<?=BASEPATH?>";
// Example: "/var/www/html/ci/system/" - usally not needed and therefore should not be exposed
//Base.appPath = "<?=APPPATH?>";


simple JSON view


<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); ?>
<?php
$json = $this->services_json->encode($toJson);
echo $json;
?>



add. config for assets and EXT:


<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

/*
|--------------------------------------------------------------------------
| Asset URLs
|--------------------------------------------------------------------------
|
| Paths to your images, javascripts and stylesheets. It's probably best to
| keep these in your web root, NOT in your CodeIgniter system folder.
| These paths must contain a trailing slash.
|
| The Assets Helper uses these when building paths to assets and prepends base_url()
|
*/
$config['image_path'] = "resources/img/";
$config['javascript_path'] = "js/";
$config['stylesheet_path'] = "resources/css/";

/*
|--------------------------------------------------------------------------
| Base Custom Config File
|--------------------------------------------------------------------------
*/
$config['javascript_path_lib_ext'] = base_url() . "js/ext/";
?>



And - because it is always needed when using a paging grid:
An extension to the activerecord class that provides the totalcount property when using start, limit:
( use instead of query->get() )



/**
* get_with_total
*
* Compiles the select statement based on the other functions called
* and runs the query. Returns also the total nr of records even limit is used.
* Adds property total_rows to result
* Better would be to add method total_rows() to CI_DB_result
*
* @access public
* @param string the limit clause
* @param string the offset clause
* @return object
*/
function get_with_total($table = '', $limit = null, $offset = null)
{
if ($table != '')
{
$this->from($table);
}

if ( ! is_null($limit))
{
$this->limit($limit, $offset);
}

// store orginal query
$sql = $this->_compile_select();
// now create query for total count without limit.
// since it can be a large resultset, we use count
// to work database independant, that should be implemented in the driver class.
// note: this overrides initial selects like 'SET NAMES 'utf8' but this should not hurt
$this->ar_select = array();
$this->select('COUNT(*)');
$this->ar_limit = FALSE;
$this->ar_offset = FALSE;
$sqltotal = $this->_compile_select();
//run total query
$query = $this->query($sqltotal);
$total = $query->result();
// thw query will always return only one record
$totalnr = $total[0]->{'COUNT(*)'};

//run original query
$result = $this->query($sql);
// create a new property total_rows to be save.
// best would be to provide new method total_rows() in CI_DB_result
$result->total_rows = $totalnr;
$this->_reset_select();
return $result;
}


use case:
(set start and limit in a paged grid, but get also the totalcount as if limit would not have been used to allow '5 to 15 records of 1017 in EXT).


...
// build your query here using the CI active record class
...
// limit the resultset
if ($limit) { $this->db->limit($limit, $start); }
if ($orderby) { $this->db->orderby($orderby); }
// use special function to get also the totals of a limited query
// this will perform the query twice.
// the first time without an entire resultset to save ressorces
$query = $this->db->get_with_total();
// get total number of records for the limited result
$ret['totalcount'] = $query->total_rows;
$ret['data'] = $query->result();
return $ret;


Regards

Wolfgang

[LiXin]

( I would love to have some kind of code generator though - to go from a VS type environment to generated Ext code would be brilliant )

Matt Saunders


I have just released a code generator just doing that. You only need create a xml definition file (or extract it from existing database) as below:



<database name="database1">
<tables>
<table name="Customer">
<columns>
<column name="Id" type="int" key="PRIMARY KEY" identity="True" nullable="No" />
<column name="FirstName" type="nvarchar" nullable="Yes" />
<column name="LastName" type="nvarchar" nullable="Yes" />
<column name="Address" type="nvarchar" nullable="Yes" />
<column name="City" type="nvarchar" nullable="Yes" />
<column name="State" type="nvarchar" nullable="Yes" />
<column name="ZipCode" type="nvarchar" nullable="Yes" />
<column name="Phone" type="nvarchar" nullable="Yes" />
</columns>
<keys>
<pk name="Id" type="int" description="PK_Customer" />
</keys>
<references>
</references>
</table>
</tables>
</database>



Then both Ext code and server side code (.NET, Java, Php and whatever you want) will be generated from above xml metadata.

Here are some screenshots:

http://www.latticesoft.com/downloads/1.jpg
http://www.latticesoft.com/downloads/2.jpg
http://www.latticesoft.com/downloads/3.jpg
http://www.latticesoft.com/downloads/4.jpg
http://www.latticesoft.com/downloads/5.jpg

[Wolfgang]

@LiXin

Just walked through the tutorial video's on your HP. Looks great. :)

Regards

Wolfgang

[manugoel2003]

looks amazing..... what all can you design in it?.... I mean, I assume that you can either drag-drop elements on the canvas or insert them by double-clicking the icons, according to the first snapshot..... so can you design full fledged web apps in it, or just some basic forms.... and is it free

[Animal]

Looks a bit like Hibernate's metadata. If you were using Java, you'd use Hibernate to specify (and make available at runtime) all that information.

Our system generates Grids automatically using Hibernate's metadata.

[LiXin]

They are different. Hibernate's metadata is mapping file for Hibernate's Java class and database tables, so at run-time Hibernate framework will know how to persist Java object to/from database. So Hibernate's metadata is for data access.

The whole idea behind our metadata is that you only need define metadata ENTITY (created from scratch or generated from existing database), then LatticeFramework Studio will generate the whole application for you without writing a single line of code. Typically, generated code will include: sql script for creating database, UI layer, Business Layer and Data Access Layer for any languages (Java, C#, Php, Perl etc.) and platforms.

In addition to code generation, you can browse the database objects, run sql query, generate ER digram and database schema report, export data using LatticeFramework Studio. It also has a XML editor and Syntaxhilight Code Editor for different languages such as Java, C#, Php, Javascript, Html etc.

[trbs]

Hang out on #extjs

When you see a query you know the answer to, help out. The guys in there aren't keeping score (are you?!?) but there's some kind of cosmic karma principle at work there. Sometimes only synchronous help, helps. Bernard (who's just replied while I'm typing this, I see) was a big help in particular - but so were many other people. (BTW, I'm "matzie" on IRC).Hang out on #extjs


hehe i just love the IRC comment :)
<trbs> /me waves to matzie

Nobody is keeping scores on IRC (at least not me or the ext bot) but surely like any real time conference system it can feel a little karmatic at times :)

It helps to hang around and talking which people once and in while helps. You see which users are active and who are in compatible timezones. Also lot's of people only respond when they know the answer or subject and have the time to help. Like i myself have not worked with Tree's in Ext so I'm not likely to respond at all to questions about TreePanel's or TreeItem's.

Anyways enough irc-love spread for this post :)
<trbs> !ext++
<extbot> karma of ext is now 15
<trbs> have fun friends