PDA

View Full Version : Ext API docs improvements



edspencer
18 Jan 2009, 11:20 AM
This originally started off over at http://extjs.com/forum/showthread.php?p=275038#post275038 but needed its own thread.

I'm dumb enough that I frequently tab between browser windows and accidentally refresh my ExtJS API (http://extjs.com/deploy/dev/docs/) app window. This causes me to lose all of my open tabs, which is annoying. Today I had a play around with the docs application to see if I could improve matters - here is the result (http://extjs.edspencer.net/extjs/docs).

The API docs now remember which tabs you had open, so if you do accidentally refresh (or close the window, or restart your browser or computer) you'll get your tabs back. It's also using Ext.History, so back and forward take you between tabs rather than back to the previous page.

To me this feels a lot more natural, and the current API docs app already feels slightly weird. I was going to develop this for my internal apps anyway, but if others find it useful I will keep it updated in public. Anyone is free to use it however they wish - the full source code is available up on Github (http://github.com/edspencer/extjs-docs) (the relevant files are inside docs/resources/javascripts). Just chuck it into a folder Apache can serve and it should just work.

I've got a few more ideas on how to improve this resource, but would love to hear what others think too. If it proves popular it would be nice to have something like this on the main API site too.

dawesi
18 Jan 2009, 6:02 PM
This originally started off over at http://extjs.com/forum/showthread.php?p=275038#post275038 but needed its own thread.

I'm dumb enough that I frequently tab between browser windows and accidentally refresh my ExtJS API (http://extjs.com/deploy/dev/docs/) app window. This causes me to lose all of my open tabs, which is annoying. Today I had a play around with the docs application to see if I could improve matters - here is the result (http://extjs.edspencer.net/extjs/docs).


me too! maybe you could add an event that catches the refresh and bypasses it too!



The API docs now remember which tabs you had open, so if you do accidentally refresh (or close the window, or restart your browser or computer) you'll get your tabs back. It's also using Ext.History, so back and forward take you between tabs rather than back to the previous page.

To me this feels a lot more natural, and the current API docs app already feels slightly weird. I was going to develop this for my internal apps anyway, but if others find it useful I will keep it updated in public. Anyone is free to use it however they wish - the full source code is available up on Github (http://github.com/edspencer/extjs-docs) (the relevant files are inside docs/resources/javascripts). Just chuck it into a folder Apache can serve and it should just work.

I've got a few more ideas on how to improve this resource, but would love to hear what others think too. If it proves popular it would be nice to have something like this on the main API site too.

be nice to add it to the docs and air docs!

rdougan
20 Jan 2009, 3:49 AM
Awesome stuff.

Would be cool if you went go to say, 'applyStyles' method in Ext.Element from the search on the main page, it currently gets highlighted but it would be cool if it it also added it to the URL.

http://www.grabup.com/uploads/072b015ed13a2ec535135ce98fc56a0a.png

Animal
20 Jan 2009, 4:46 AM
Fantastic. Are you willing to let Jack use this code in the Ext doc page?

edspencer
20 Jan 2009, 5:02 AM
Fantastic. Are you willing to let Jack use this code in the Ext doc page?

Absolutely


Awesome stuff.

Would be cool if you went go to say, 'applyStyles' method in Ext.Element from the search on the main page, it currently gets highlighted but it would be cool if it it also added it to the URL.

http://www.grabup.com/uploads/072b015ed13a2ec535135ce98fc56a0a.png

Excellent idea, I'll do it unless you beat me to it. Might be nice to have it look like #Ext.Element/applyStyles - the only reason I kept the #class=Ext.Element version was to make it look like the old direct links, but I guess the class= is redundant.


me too! maybe you could add an event that catches the refresh and bypasses it too!

I think this makes sense too - again it's up on Github so if you fancy getting your hands dirty by all means give it a go, if not I'll do that when I get a free moment.

evant
20 Jan 2009, 5:29 AM
Very cool, I'll keep my eye on this.

watrboy00
20 Jan 2009, 9:53 AM
Neat stuff but I think I found a bug. Open up the docs and refresh the page.

You get http://extjs.edspencer.net/extjs/docs/#class=undefined and it opens a tab with no content or title of course.

rdougan
21 Jan 2009, 7:03 AM
http://github.com/rdougan/extjs-docs/tree/master

I have added the member name onto the end of the url when used by the user, however it doesn't load when you refresh, it only goes to the class. In the scrollToMember method on line 268 it doesn't seem to be getting the el. Maybe a timing problem?

I have also fixed the refresh bug above.

It would be cool to add state to the tree at the side using cookies. I have no idea how to do that though..

walldorff
12 Feb 2009, 7:30 PM
I'm dumb enough that I frequently tab between browser windows and accidentally refresh my ExtJS API (http://extjs.com/deploy/dev/docs/) app window.

Same here <bg>
This is great. Far better than the original. Ik hope Jack wil implement this soon. I'll be using it forever :)
Thanks Ed!

mavenn
24 Mar 2009, 7:13 PM
http://extjs.edspencer.net/extjs/docs/#Ext.form.NumberField

i went there and refreshed page

and the tool is spinning right around and around. yo flo rida.

TrotskyIcepick
23 Jul 2010, 3:10 AM
Hi Ed,

I've been searching for ages for an example of saving the state of dynamically generated tabs, and this almost does the trick.

I have a layout with an accordion on the left with menu items in it, when a menu item is selected a tab opens in a tabpanel on the right. I currently have it so that a cookie is created on either a tabchange or add event.

What I can't quite grasp from your code is how you are righting the history information to the cookie, I can see the ys-doc-body cookie and what it contains, but how are you getting the information into it?

Sorry if this is something obvious, just a quick pointer would be great.

Thanks
Andrew

edspencer
23 Jul 2010, 10:00 AM
I'd completely forgotten about this... It was a long time ago now so not completely sure but it looks like I'm just hooking into Ext.Component's built-in state methods (getState and applyState) - see http://github.com/edspencer/extjs-docs/blob/master/docs/resources/javascripts/MainPanel.js#L98. This then gets saved to a cookie automatically because I set this:



Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

TrotskyIcepick
30 Jul 2010, 2:30 AM
Thanks for the pointer Ed, I'll check it out.

Sorry about necroing an old thread, I was just chuffed to finally find an example of something I've tried to achieve for a long time without much success ;-)

Thanks
Andrew

Dipish
10 Feb 2011, 4:24 AM
Why do the current Ext docs still lack this feature? You just dont get your hands on it or there are some problems with that? I'm going to start using this Ext.History class so it'd be nice to know if there are any drawbacks.

edspencer
10 Feb 2011, 11:01 AM
Big updates coming soon here