My First Attempt... and Bugs?

[Steffan]

Well, this is my first attempt with Ext creating a web app. Overall I am thrilled but hit a wall...

Point of reference : http://new.saguarogold.net/

What I am after is a couple things. Constructive critcism and advice on how to improve my skills. I am OK with CSS but definitely not a pro. The way I have this set up is so that the menu bar and status bar (my own) never need reloading. Then, they overlap an iframe which has all the content. I used Javascript to resize the iframe and divs to keep it looking the same but I am hoping that someone will have some advice on how to do that solely with CSS. Also too is if you look at my JS you'll see I used hard coded values in the resizing. I tried to make things dynamic but ran into something weird. Not sure why but using alert(Ext.getDom("container").style.borderWidth) yields nothing at all yet if you look at the CSS it does have that property assigned. I was trying to set it up so that it could be more dynamic. I ran into a wall there. It behaved this way in all browsers I checked.

Additionally is there a way to add a column to the drop down menus that shows hot keys for the individual items? Also, did I miss it or is there a property for menu items that allow a hotkey shortcut so that I do not need to do a KeyMap to achieve the same thing? I am moving along here and am trying to achieve a complete app within the browser functionally.

I am seeing something odd as well and I am not sure if it is my additional coding or what but sometimes when this loads in FF it sits there saying it is still loading yet it is still functional. On Safari it loads quick about 90% of the way then it slows down. Is this due to the amount of stuff being loaded?

With the menus... Is there a property I missed that will allow me to set a timer for the menu to close or close on mouse out if no selection is made?

This is just a raw first try. It took me a long time to figure this out but I am happy thus far and am wide open to suggestions.

Sorry for the long winded post.

[liggett78]

Just at the first glance:
1) your border declaration should look something like - border: 5px solid #... Don't split it in border-width and border, since border declaration overwrites your border-width settings.

It's always good to use Firebug to investigate such kind of things or even change them directly.

2) Ext.getDom().style returns only the inline element's style, not the style computed from inline style and your CSS rules.

3) I personally don't like mixing Ext and DOM scripting, just because sooner or later you'll run into trouble if not careful. Use Ext methods and objects whenever possible, like Ext.get('...').setHeight() instead of Ext.getDom('...').style.height = ... It's as simple as that.

4) why don't you use BorderLayout, which would automatically resize the inner ContentPanel, instead of going through the mess with your clientHeight and *width? Also: assigning event handlers (window.onresize = ...) directly could overwrite handlers that Ext probably sets up, breaking some functionality and leaving you wondering, why the stuff is not working...

[Steffan]

I have FireBug installed but have not really tried it out yet to understand it. I have been coding JavaScript for a while now but clearly long handed compared to what Ext offers. It's amazing the time it takes. I wish there was a good IDE for stuff like this where you get code completion. I hate to ever praise M$ but I have to give them credit for VisualStudio. I've used it for 2.5 years now for all my classes at school and the intellisense rocks. I am using Coda now I guess I need to build the auto completion module for it and see if I can get it to work like Visual Studio. Anyway onto the nitty gritty on this.

I missed the setHeight(). I am still working with the documentation to learn where everything is still. I'll look into that.

As far as the splitting of the border like that it was only to try and figure it out.

Have any examples of what you meant by border layout? Is it possible to have all that automatically done so I can make it perfectly aligned?

[tryanDLS]

Look at the complex layout example and there is also a tutorial on layouts. As far as IDE, they have been discussed several times - search for IDE or Aptana.

[Steffan]

Is there a way to add a column to the drop down menus that shows hot keys for the individual items? Also, did I miss it or is there a property for menu items that allow a hotkey shortcut so that I do not need to do a KeyMap to achieve the same thing?

[Steffan]

Ok. I did look at the border layouts and while cool I think they are more than what I need. In researching border layout in google I saw that I forgot the top left right and bottom attributes. Setting them fixed part of the problem. The only thing left is the iframe. I have it looking beautiful exactly how I wanted it in FireFox but in Safari and IE7 (havent even checked 6) the iframe does not respect the css. I generated this via the dom rather than using Ext. Is this where the problem lies? The new incarnation is

http://new2.saguarogold.net/

[Steffan]

Ok. I love it when struggling for hours I can find some solutions. I now have the iframe below the menus behaving correctly.

http://new3.saguarogold.net/

Now it leads me to my remaining questions to see if I can solve them or if someone knows the answer.

1) I am seeing something odd as well and I am not sure if it is my additional non-Ext coding or what but sometimes when this loads in FF it sits there saying it is still loading yet it is still functional. On Safari it loads quick about 90% of the way then it slows down. Is this due to the amount of stuff being loaded?

2) Is there a property I missed that will allow me to set a timer for the menu to close or close on mouse out if no selection is made?

3) Is there a way to add a column to the drop down menus that shows hot keys for the individual items?

4) Is there a property for menu items that allow a hotkey shortcut so that I do not need to do a KeyMap to achieve the same thing?

I'm getting there slowly. Any advice appreciated.

[Animal]

What you really need is a MenuBar, not a Toolbar who's buttons show Menus.

There is a MenuBar implementation around, and I'm using it in my application: http://www.extjs.com/forum/showthread.php?t=2774

As for shortcut keys, I've provided a solution which works for Toolbars: http://www.extjs.com/forum/showthread.php?t=5762

I haven't done this with the MenuBar yet. Fancy having a go at adding this? Might take some work - every menu option added would have to navigate back up to the root MenuBar to add the shortcut key to the MenuBar's KeyMap.

[Steffan]

I'll be sure to look into those options you posted. I ran into something and wondered if I am doing it right.
original method
var contentFrame = document.createElement("iframe");
contentFrame.id="contentFrame";
contentFrame.name="contentFrame";
contentFrame.src="http://www.saguarogold.net";
contentFrame.width = "100%";
contentFrame.height = "100%";
Ext.get("content").appendChild(contentFrame);
new concept
var contentFrame = new Ext.Element("iframe");
contentFrame.id="contentFrame";
contentFrame.dom.name="contentFrame";
contentFrame.dom.src="http://www.saguarogold.net";
contentFrame.setWidth("100%");
contentFrame.setHeight("100%");
Ext.get("content").appendChild(contentFrame);

I figured I would try creating the iframe via Ext but the latter method returns an error saying that dom has no properties. Am I missing something here or should I stick with the original way?

[Animal]

Why are you using an iframe?

If the content comes from the same domain, just use a div, and load the content using Ext methods.

[Animal]

Ext.Element does not create DOM elements, it wraps existing ones.

[Steffan]

I am using an iframe because I have an existing app built using regular forms and am unable to convert it all that quickly. This way I can just set the target of the frame and call the original items. I was trying to avoid loading the same menu for every page. I figure it will be faster and lighter this way.

[Animal]

I don't get it, why not just load the ContentPanels through Ext using the same URLs that you would put in iframes???

[Steffan]

Perhaps it is my ignorance hence the title My First Attempt. I have not used this architecture before yesterday so I am not fully sure of what all is needed or how it works. Can the Ext framework allow me to load an existing page and then submit the form like a traditional webapp without the overhead of consistently loading the menu? I know on a regular div I can load content and then append it to a div and all but can that div submit the information and load the response page without reloading the entire page without AJAX? It seems that for the time being it is faster to just use the iframe and load the pages. Page X can call the response page Y and work as it was before, just a better interface. As time goes on I can do more and more with Ext. I envision sometime having everything load at one time and then solely ajax for the serverside interaction. Any suggestions? I just figured a piece at a time. Did you see I fixed the iframe? Also, weird, I liked the page loading image that popped up in the documentation. I tried to copy it and use it since my menus take some time to load and but following the same example I was getting js errors saying that Ext was not defined. Is there an example I missed somewhere? BTW, I appreciate your help and suggestions. I too do frequent free help. I make free plugins for Lasso http://www.lassosoft.com as well as provide the free support.

[liggett78]

Take a look at Ext.DomHelper. You could use it in this way (in case you decide stick to iframe):

Ext.DomHelper.append('my-div', {tag: 'iframe', id='contentFrame', src="..."});

There is a blog article here (http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/) that explaines it.

[liggett78]

Regarding the loading mask you mentioned. I'm sure there are some posts on this issue, but basically you put this kind of code directly after your body element:


<div id="loading-mask" style="font-size:0.75em;font-family:Verdana,Tahoma,sans-serif;width:100%;height:100%;background:#aaa;position:absolute;z-index:20000;left:0;top:0;">
<div id="loading" style="background-color:white;border:solid 2px #000;height:100px;width:275px;margin:0px auto;margin-top:15%;vertical-align:middle">
<div style="width:230px;margin-left:auto;margin:37px auto auto auto;"><img src="ext/resources/default/grid/loading.gif" alt="Loading" style="vertical-align:middle"/>Loading...</div>
</div>
</div>

After this HTML piece you insert all your scripts and probably stylesheets (though placing link elements in body is illegal from the XHTML point of view):

<script type="text/javascript" src="ext/adapter/..."></script>
<script type="text/javascript" src="ext/adapter/..."></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />


It goes without saying that you don't list these scripts in the head tag of your page.

Finally in your Ext.onReady() code at the bottom of the function you remove the mask like this:

var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');
mask.setOpacity(.8);
mask.shift({
xy:loading.getXY(),
width:loading.getWidth(),
height:loading.getHeight(),
remove:true,
duration:1,
opacity:.3,
easing:'bounceOut',
callback : function(){
loading.fadeOut({duration:.2,remove:true});
}
});

See the source of the docs/index.html for more details etc.

Hope this helps.

[Steffan]

Take a look at Ext.DomHelper. You could use it in this way (in case you decide stick to iframe):

Ext.DomHelper.append('my-div', {tag: 'iframe', id='contentFrame', src="..."});

There is a blog article here (http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/) that explaines it.

I think you made a slight typo. The equals should be colon. This works extremely well and one line of code. The documentation on this is a big shaky since it does not show that the append can take all of these attributes. Does this allow you to apply all element specific attributes to the item as it is created? I used height, width, noresize, name, id and src.

[Animal]

"all these attributes"? If you look, it's just HTML in Json form.

You can also add



style:{height:"16px", width:"20px"}


and other attributes for other tags.

Yes, you can submit forms in content loaded into ContentPanels without submitting and returning the whole page. Not using iframes.

This is what "Ajax" is all about.

[Steffan]

"all these attributes"? If you look, it's just HTML in Json form.

You can also add



style:{height:"16px", width:"20px"}


and other attributes for other tags.
That is really cool. I'll be using this as I go along.



Yes, you can submit forms in content loaded into ContentPanels without submitting and returning the whole page. Not using iframes.

This is what "Ajax" is all about.

I figured as much. I've done AJAX before. I found a script at quirksmode and used it for several projects. It works great actually. I guess the simplicity of what I was after has been clouded. This conversion to Extjs is not as rapid as I'd hoped. So, I must find a middle ground. As I was saying earlier, I will get the menus and loading scripts working flawlessly for me so that I can use it with all the existing pages. As I get the existing pages and this working I will begin transitioning the pages to using AJAX so that I will have the whole thing load one time.

The loading example as posted earlier was a big help. I am fine tuning that to work as shown in the documentation. I just need to work on the other numbered items in the list I posted earlier.

Thanks for all the constructive criticism. It all helps!

[Steffan]

Anyone have a good example of the most simplest json reader that gets a single record from a page? I am reading the docs and seeing examples but I guess I am missing out. The examples I have seen thus far show multiple elements in sets but I am only returning one row if you can call it that. It is data like current email count and session expiry. Eventually there will be something that says to close the window if the auto refresh says the session expired etc. I think using the following:

var ds = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'http://new4.saguarogold.net/status.lasso'
}),

// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: '',
},
[
{name: 'lastchecked'},
{name: 'count'},
{name: 'session_expire' }
]
),
});
I can get the data but I need to figure out how to parse it.

Any advice or examples are appreciated.

[Steffan]

Still getting nowhere... I am trying the following:

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/status.lasso'
}),

reader: new Ext.data.JsonReader({
root: 'data'
},
[
{name: 'lastchecked'},
{name: 'count'},
{name: 'session_expire'}
]
)
});
ds.load();

alert(ds.getCount());

I do know that the page is being polled yet I always get a result of 0. The data returned is:

{"data": {"count": "1", "lastchecked": "03:16:09 PM 06/02/2007", "session_expire": "0"}}

Any ideas?

[tryanDLS]

load is an async process - the result will not be available yet when alert is executed. You need to add a callback or a handler for the load event. This has been covered in many threads.

[Steffan]

load is an async process - the result will not be available yet when alert is executed. You need to add a callback or a handler for the load event. This has been covered in many threads.

Any links in particular to look at? Also, are there any examples I missed where it shows how to do a handler as you suggest?

[Steffan]

On top of what I asked... Is this what you mean?

ds.on('load', function() {alert(ds.getCount())});

Then it does return the proper count. Is it necesary to return it as a set of records rather than just a single record?

[tryanDLS]

Yes per the docs, JsonReader reads an array of records - even if it's only one row. If you don't need to build a store and just want to load something via Ajax, look at the Connection or UpdateManager classes.

[Steffan]

Thanks... I guess I have a way to go here. I appreciate the help.

[Steffan]

Using Connection or UpdateManager how would I break it down into gettable attributes or would Ext automatically do it if the data is in a json format?

[Steffan]

Also... in a reader I have

proxy: new Ext.data.HttpProxy({
url: 'http://new5.saguarogold.net/async_data/status.lasso',
params: {x:'xxx'},
}),

but the params do not get sent. Why is this? What am I missing?

[Animal]

You specify params for each request a Proxy makes on the load() call:

http://extjs.com/deploy/ext/docs/output/Ext.data.HttpProxy.html#load

To specify a set of params that will always be passed, change "params" to "extraParams".

You should have been able to find this from the doc for Connection, but there was a mistake in the documentation format, so it didn't show up. Next doc release will tell you all this.

[Steffan]

You specify params for each request a Proxy makes on the load() call:

http://extjs.com/deploy/ext/docs/output/Ext.data.HttpProxy.html#load

To specify a set of params that will always be passed, change "params" to "extraParams".

You should have been able to find this from the doc for Connection, but there was a mistake in the documentation format, so it didn't show up. Next doc release will tell you all this.

I did look under connection and saw it there under the request method. I did try that and it worked but I posted on another thread that I tought it was broken. From my laptop as it said was hit or miss with it in the load statement. I am seeing now from my work station it is dead on everytime. For some reason the extraParams didn't work for me in the load() method. Did you mean that was for the
proxy: new Ext.data.HttpProxy(
{url: 'http://new5.saguarogold.net/async_data/status.lasso'}),
??
This is what I am using in the load statement and it seems to work for test purposes.
emailDS.load({ params:{x:'xxx'} });
setInterval( function(){ emailDS.load({ params:{x:'xxx'} }) }, 3000 );

[Animal]

Well, Store.load with params loads a Store passing the params, so that's a good way of reloading a Store.

But you were asking about using HttpProxy?

[Steffan]

Yes, httpproxy. The code I was using is
var emailDS = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'http://new5.saguarogold.net/async_data/status.lasso',
}),
reader: new Ext.data.JsonReader({
root: 'data'},
[
{name: 'lastchecked'},
{name: 'count', type:'int'},
{name: 'session_expired'}
]
)
});
but it required the .load() to have the params in it that I was after. I have since changed it using your suggestion and now the HttpProxy looks like this:
proxy: new Ext.data.HttpProxy({
url: 'http://new5.saguarogold.net/async_data/status.lasso',
extraParams: {'-session_id' : user.session_id}
}),
It loads the url with those parameters and it works good. I guess my surprise was that I didn't see that extraParams as an option for the HttpProxy nor did I see the url.
http://extjs.com/deploy/ext/docs/output/Ext.data.HttpProxy.html
nor here
http://extjs.com/deploy/ext/docs/output/Ext.data.Connection.html
Was I looking in the wrong place?

[Animal]

Well, yes, but even if you looked in the right place, the docs weren't quite right, so you wouldn't have found them. Next time the docs are deployed, you can check this out.

If you look at the HttpProxy docs, they say that the constructor accepts a config object for an Ext.data.Connection, so you should have looked there..... but the docs for Ext.data.Connection aren't right, so those options don't show up!

One thing I see in your code. Are you sure its ok to have a parameter nme that starts with "-"?

[Steffan]

Well, yes, but even if you looked in the right place, the docs weren't quite right, so you wouldn't have found them. Next time the docs are deployed, you can check this out.

If you look at the HttpProxy docs, they say that the constructor accepts a config object for an Ext.data.Connection, so you should have looked there..... but the docs for Ext.data.Connection aren't right, so those options don't show up!
In this case I would suggest a wiki for the documentation so that users can add to it and have a much faster way of updating these things. I'm not quite sure how you'd go about packing that into distributable documentation later on though...

One thing I see in your code. Are you sure its ok to have a parameter nme that starts with "-"?
I am using Lasso which is like PHP for the back end and when a page loads with that as a parameter and I call a session start it will use that value to load the session. Lasso sessions will work with a cookie or a link parameter like this but I was trying to use the link since I am not sure how a cookie would work when this is loaded via httpproxy rather than directly. I am still trying to figure out how I want to do all this. One thing is that this will be consistently polling the server for a few things like count of emails in the inbox and session status. I'll make it close itself if it receives a notice that the sessions is expired. The current incarnation of this will pop up the window as the app by itself so that it is able to then close itself providing they don't shut off JS but even then the whole thing would be useless anyway. :D

[Animal]

XHRs send cookies, otherwise people wouldn't be able to use them.

[Steffan]

Ok. So now I am trying to use forms. So far so good. I have the forms drawn and validating information. My questions that I am having so far are :

prefs.addButton('Save', function(){ prefs.submit() } );
prefs.addButton('Cancel',function(){ document.location='/base.lasso' });

The cancel button seems fine but am I going about submitting the form called prefs correctly? Also it appears that it does do somethingbut it seems to not submit like an every day html form. Is it expecting to post and get a JSON response back? The goal I was after for now was to have it submit back to the same page then server side scripting would insert the data and re-display it in the form with a message box that says the data has been saved. I see an error in the JS console that says that there is a syntax error and it points to the doc type at the top of the form response page. Any suggestions?

[Animal]

Unhook the Ext.form.Form's submit event listener which hijacks the submit event and cancels it:



myForm.el.un("submit", myForm.onSubmit, myForm);


Then remember that calling submit on an Ext.form.Form does an "Ajax" submit, and expects a javascript object back which defines success and field error messages.

If you want a regular submit, submit the form's <form> element! That is in



myForm.el


Undocumented, but it should definitely be public. Access to the DOM <form> element is quite necessary.

[Steffan]

Am I getting this all wrong?

prefsForm.un("submit", prefsForm.onSubmit, prefsForm);
prefsForm.addButton('Save', function() { prefsForm.submit() });
prefsForm.addButton('Cancel',function(){ document.location='/base.lasso' });

prefsForm.render('form-ct');

It is ignoring the "un" and submitting via ajax still... Hrmm.

Any suggestions? I tried moving the un after the addButton and still no dice.

[Animal]

Then remember that calling submit on an Ext.form.Form does an "Ajax" submit, and expects a javascript object back which defines success and field error messages.

If you want a regular submit, submit the form's <form> element! That is in



prefsForm.el

[Steffan]

This is kind of a challenge to the CSS gurus with IE 6. I cannot find a solution to this and I have tried over and over. My app looks right in IE7 PC and everything else.

http://new.saguarogold.net

Everything gets crammed up against the top and IE6 does not respect the positioning. It does not even let the Ext menu stretch the width. Any suggestions would be appreciated!