ExtJS beginner - Samples/Extensions where is the documentation? - javascript

We have been looking at the ExtJS samples quite a few times over the years and recently decided to use it because I was looking at the samples and saw a Tree Grid and felt like "Yes this is exactly what I need". So I download ExtJS read a bit on the getting started/FAQ/Tutorial from the website.
Then I decide to try to use the Tree Grid to find out it's not in the documentation anywhere. so I thought it was just that the documentation was not fully updated for the latest 3.1 release so I look at the sample code to realize that most of the JS classes used for that sample are under the ux/treegrid folder, and the only place I could find that code was by downloading it directly from the sample. I never found any documentation for it anywhere.
Not only that, I also found that there are two very similar samples: Tree Grid and a Column Tree that shows how to customize the Tree Panel component, which confuses me even more. Neither have documentation for them and I can't tell if this code is supported or which one I should use or even if I should use any of them in fact; is this code production ready or just something that was thrown out there to show a nice sample and the extensibility of ExtJS ?
I noticed that many of the samples shown on ExtJS website are using components that are not part of the 'ext-all.js' and are not really documented. So I guess I am missing something about what ExtJS is supposed to be or the general philosophy behind this library ?
I guess I was expecting that most of the samples on their website would be available widgets from the library demonstrating how to use them, not showing me "Here's what you could do if you knew how to extend those components".
Any help/comments to enlighten me would be appreciated!
Thanks

With user extensions, generally, you are on your own - which is not a bad thing. Your best bet is to read the code and if it's well documented, you may be able to run jsdoc on it. I know this is not what most people want to hear, but it's best to understand the code you are adding to your project as if it was your own.
Specifically for the ux.treegrid.TreeGrid you are using, there are plenty of examples in the forums and on the net to get you rolling (I think TreeGrid is newer than the ColumnTree). If you get stuck on a specific issue, the forums and stackoverflow are the perfect places to get a quick answer.
So I guess my answer is, "Download the extension and start playing with it as if you wrote it yourself. When you run into a problem, post it here.".

I have found site where you can download more or less full ExtJS documentation with ux (User eXtension)
http://www.diloc.de/blog/extdocsuite/
Short description of the link.
ExtDocSuite
The ExtDocSuite is an Adobe Air Application that includes the current ExtJS 3.2 Documentation in a single application to install. We provide this package, because ExtJS has not yet updated the Air Documentation app for Ext 3.2.
Features:
* Includes the latest Documentation for ExtJS 3.2.0
* Includes the latest ux Documentation from the examples/ folder (using ext-doc)
* Includes the latest Ext.Air Documentation. (using ext-doc)
* Search works (online)
* EXPERIMENTAL per-class search aids in finding the right documentation in big classes
* Integrated Update-System so that your documentation always stays up to date

Starting with Ext 4.0, official ux'es have become much better supported and documented by being included with the API docs (look under the Ext.ux.* namespace).
The Ext 3.3 ux docs are located here. Not sure how complete they are, so YMMV (e.g. both TreeGrid and ColumnTree are included, but without any real documentation).

I encountered the exact same problem recently when I went to use the row editor capability (attached to grid). Being a long time ExtJS user, I never stopped to think about the lack of documentation accompanying the examples, but your comments are spot on.
For the RowEditor, I found documentation on the internet. I also find the ExtJS forums to be a great place to find suggestions, code samples, and links to documentation .

Related

Jquery mobile - 1.4.2 : general documentation lakes?

I'm trying to learn some Jquery Mobile basic to state if this language would be appropriate to build inhouse mobile application prototypes.
I'm using the 1.4.2 version and the associated documentation looks very strange for me.
For example, a lot of methods are declared deprecated as of 1.5 version , but corresponding replacement examples are never given.
Perhaps have I serious problems to understand but reading this jqmData() documentation page for example, Quick reading this article I understand :
1°) that the jqmData() method doesn't accept arguments (green highlighted section)
.jqmData()
This method does not accept any arguments.
2) and few lines bellow :
you should use $("div:jqmData(role='page')")
This is just an isolated example but a lot of posts give advice that are cons for others with no serious reasons as if everybody was always searching for workarounds instead of using consistent and stated development policies.
is it just my own feeling or is it shared opinion ? It's really disturbing when you're learning not to be confident in such basic material.
In fact my feeling is that information is spread over a huge number of sources that don't state about version level issues and future compliance constraints. For example What's the right development strategy to adopt : using html 5 data-* attributes or jqm classes ? what's the advice ? A mix of both is really not a proper choice for code readability in team devellopment.
Would you have 1.4 jqm consitent documentation references ?
thanks in advance
I hope it's not to late, I will try to give you a honest answer.
On the first glance jQuery Mobile documentation looks like hell, chaotic bunch of ambiguous data.
A lot of information without a real context. This documentation is written for developers with prior jQuery knowledge. If you carefully take a look you will see that basic documentation form reflects jQuery documentation. Basically it is useful only if you know what and where to look.
On the other side, once you learn what's what it becomes obviously easy to read.
There are a lot of mistakes and it takes to much time for them to get corrected. This is partially fixed thanks to StackOverflow, here you will more answers (better explained) and information regarding jQuery Mobile then provided in official documentation.
I don't know what happened to 1.4 documentation, 1.3 had much better one. You would learn everything from DEMO site and API site will only give you better perspective.
Don't worry about deprecated methods, jQuery Mobile 1.5 will have all needed answers. Old documentation rarely has information about future software releases (I'm not talking here only about jQuery Mobile, it is always like that). When few years ago development started on jQuery Mobile, plan was created six versions in advance, you can still find it online.
jQuery Mobile developers don't have that much resources like jQuery developers, plus everything is done on pro bono basis. Free product are tied to certain limitations, in this case documentation pulled the shortest straw.
While jQuery Mobile don't have best documentation ever it has best 3rd party support, other mobile frameworks don't come close, except maybe Sencha Touch but that's completely different story.
Also, when you find an error just report it on their github page. It will be fixed in notime, plus support is free ;)
Regarding your second question .jqmData() is a method while :jqmData( is a selector. But you are correct, method .jqmData( accepts parameters so it's a documentation mistake.
Regarding your third question, use of data-* attributes is a right development strategy but ultimately not the only one, you can use anything you like. Don't forget sometimes it is not easy to be HTML developer in HTML5 world.
If you are still not certain regarding jQuery Mobile then take a look at my article covering currently best known frameworks. These are oldest and best known frameworks, all of them are still in development and they are more then stable.
My advice would be these three frameworks:
Sencha Touch
Kendo UI (PhoneJS as an alternative)
jQuery Mobile
Several newer frameworks like Famo.us advertise themselves like second coming so you can also look at them. Just be careful newer is far from better.
If you have more questions feel free to ask, I have more then enough experience with mobile world, specially with jQuery Mobile.

Where can I find the RXUI Javascript 'Time Flies' example?

About two years ago, there was an awesome RXUI-For-Web prototype from Microsoft Research, that came with an example html page that animated the text 'Time flies like an arrow' across your page as you moved your mouse. I have been trying to find the prototypes again, but MS research has reorganized those pages and I can't find the original example projects again. Does anyone know where this has moved to? Does anyone know an alternate location I can find the original 'Time Flies' example at?
Randomly came accross both this question and an apparrently working example over on github. :)
It appears that the sample isn't included in the current git repository. The team is working on updating the repository with newer bits. You may find it reappear and fly faster at some point. I think you can still find the sample in the RxJs 1.0 download at http://msdn.microsoft.com/en-us/data/gg577610#js. The blog post explaining the code is available at http://blogs.msdn.com/b/jeffva/archive/2010/03/17/reactive-extensions-for-javascript-the-time-flies-like-an-arrow-sample.aspx?CommentPosted=true#commentmessage. Unfortunately the post online doesn't work any more because it used a version of RxJs that is no longer available (getting a 502 error).

Preloading Ext JS & custom JavaScript files at application boot time

I'm creating an intranet application, the UI of which premoninently uses Ext JS 4.1.1
I have created several custom javascript classes extending Ext JS controls and other code for UI, validation, communication, etc.
Given that my code is not very huge and that my application will be deployed in a controlled & well known environment I'd ideally like to load all .js files upfront at the time of application invokation (boot). I'd like to know an approach to achieve this, mostly from within the relm of Ext JS.
What you want to do is something really usual. Take a look at the deployment section to know how to use the Sencha SDK to create one file containing all your custom javascript classes which extend extjs component here
I hope it is useful ;)
As of this month Sencha (beta) released a revamped build tool. Actually, it is a complete rewrite in Java (I believe). Sencha Cmd is the name, and it is all that the predecessor should have been!
Compile times have been crunched to maybe a 10th of its predecessor and packages/builds are now configured using a powerful command processor.
Integration into other build frameworks and CI servers is now a top priority and achieved by integrating the tool with ANT.
I just spent the past hours to migrate a project from the old Sencha SDK Tools to the new Sencha Cmd. I particularly love the new compiler.
Documentation is already pretty good.
Blog post that introduced Sencha Cmd
Official SDK documentation - there is a total of 10 articles on the subject, don't miss them, particularly the
Compiler documentation
For smaller projects that follow the standard (single-page) pattern suggested by Sencha, there is actually a range of higher-level commands that manage the entire application creation and build process.
Furthermore, Sencha has now a pattern in place for multi-page applications.
And you can always use the compiler directly and implement your own build process on top of it. That's what we did in our project.
There is one class called Ext.Loader
This is more of a server-side question than an Ext JS question. You want to include all your pages up-front? Get a JavaScript compressor to concatenate your files together, minify the whole pack, and add a <script> tag to every page in your web app.
I also work on an intranet web app that heavily uses Ext JS (both 3 and 4), but we have quite a large codebase. Since we use Tomcat, we have a Java class that includes standard files on each page, plus any file groups or individual files we need for that page. Something like that might work for you as well.
You can use Ext.Loader for dynamic loading when you need it, but that doesn't sounds like what you're looking for. Still an option though, should your codebase expand and you need a better solution.
EDIT: As mentioned in the comments, my original answer failed to address the Sencha SDK Tools. I felt it would be more beneficial to make my response part of my revised answer.
While this task may be exactly what the Sencha SDK was designed for, I feel that the product is not yet mature enough for production environments. At the time of writing, the current version is 2.0.0 Beta 3. Beta, meaning it's still under development, and it shows. Documentation is practically non-existent and the official forums are full of topics claiming the product simply does not work. At this point, it's nothing more than a toy to be played with. The most helpful document I've seen is Sencha SDK Tools 2.0 and ExtJS4: The Missing Docs, and the author even ends with "The SDK Tools need a lot of work."
When I'm choosing a product for a production environment, I want something stable, something reliable, something with good documentation, something with quality support. The Sencha SDK Tools are none of those things. Yet.

Best available guide to Sencha?

i'm very new to sencha and i need help with it.
can anyone give me few links regarding sencha tutorials and books....
on the other day i found out a site showing info and source code about sencha.
i remember it as sencha kitchen sink.....but now when i google it i couldn't find it if you know about this please help me with a link.......
thank you,
Here is everything I have found useful over the last few weeks whilst I have been learning Sencha Touch, hope they help:
1) A number of videos can be found here: http://vimeo.com/15888504 (Andrew Neil's are particularly good, there are a few on layouts and one that takes you through how to create the GeoTweets sample app)
2) Sencha Docs - http://dev.sencha.com/deploy/touch/docs/
3) Getting started doc (mentioned by Sachin above)
4) The examples included when you download Sencha (Kitchen sink etc.)
If you are new to Sencha touch, then here is a very good tutorial to begin with.
http://dev.sencha.com/deploy/touch/getting-started.html
there is a good sencha touch book. Althoug it is not finished yet, but u can order this book.
check this url : http://manning.com/garcia2/
Even everything you need can be found in links given above sometimes i take a look around these demos and their source to find solutions:
http://www.superatic.com/pr0v3/sencha-touch-beta-0.90/examples/
http://www.simoens.org/Sencha-Projects/demos/
check latest docs on http://docs.sencha.com/touch/2-0/
They have improved a lot in latest documentation and now there are a lot of examples also available to download unlike earlier when they had only couple of basic examples.
I think this would be the best documentation available. There are books but usually by the time they get to market, they are already outdated. So this would be the best resource for now.
#Prateek Here's a 7-minute introductory video of Sencha Touch using the Kitchen Sink: http://vimeo.com/12636777
Hope this helps.
This you can find docs about sencha
http://www.sencha.com/learn/touch
Check out: this book at Amazon. I am almost done reading this, its pretty good.
Since docs and tutorials have already been mentioned try these books
1 - Sencha Touch Mobile JavaScript Framework
2 - Sencha Touch Cookbook
Also try some sample apps at http://dev.sencha.com/deploy/touch/examples/production/index.html

Adding a Resource View/Gannt chart to jQuery Fullcalendar

I am using jQuery Fullcalendar and if you're not using it I suggest you do too because it is absolutely fantastic at what it does!
However to be really useful to me and my project (and many others) I honestly believe it needs a resource/gannt view.
Not a problem one would think... until you look under the hood of jQuery FullCalendar and see that the way it generates it's views is not for javascript developer wannabes... ie me.
Having realised this is out of my league I had to go searching elsewhere looking for any calendar/scheduler that will provide a resource view.
Here are three proprietary calendars that promise this feature.
http://java.daypilot.org/
http://www.dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml
http://web2cal.com/ajaxeventscalendar/calendar-demo/912-premium-demo/157-scheduler-view
Unfortunately both daypilot and dhtmlxscheduler lack the clean and clear interface that FullCalendar achieves so well and web2cal just looks and feels unfinished and is still in Beta.
Alternatively I was wondering if anyone has any ideas on how I could integrate a jQuery Gannt chart with jquery fullcalendar.
I have found a few projects that look promising
http://www.maro-z.com/examples/jquery.gantt/
http://code.google.com/p/jquery-gantt/
http://github.com/thegrubbsian/jquery.ganttView
I have looked into how fullcalendar generates its views and so far have not had any success in extending this to provide a container for one of these gannt charts to 'sit within' fullcalendar and be triggered by its buttons.
This seems to be one of the more popular feature requests with many people asking for it on the official issue tracker
http://code.google.com/p/fullcalendar/issues/detail?id=150&colspec=ID%20Type%20Status%20Milestone%20Summary%20Stars
So I am left at a cross roads. I could pay for a half baked proprietary solution that has minimal to no community support or I can try and find a way of getting a resource view inside of jquery Fullcalendar by asking the people who really know jQuery.
I would happily donate the funds saved from using a proprietary solution to the developer of Fullcalendar.
The developer of FullCalendar seems to have a lot on his plate and I would like to again thank him for this truly amazing calendar.
I hope someone can share a solution with us!
Tim
Just to update what has been done for this idea:
https://github.com/jarnokurlin/fullcalendar
It's now a fork of fullcalendar.
For those searching for a resource view based on v2.1.1.
Here is a fork implementing it that will hopefully be merged into fullcalendar at some point.
I know it's a pretty old question, but I was looking for something like that a few weeks ago and I couldn't find anything here. So, what I'm using is Kendo Scheduler. It has a horizontal grouping, vertical grouping, timeline and some other interesting things like bind against SignalR.
Moreover, FullCalendar announcement that it will be a Resource/Timeline view soon. But probably it will be released under a commercial license.
As far as what StackOverflow users can offer you as an answer, this is as close as you'll ever get:
http://code.google.com/p/fullcalendar/issues/detail?id=490
There is an open task and at the bottom are some work-in-progress examples of extensions to fullcalendar to achieve what you want. Please offer to contribute or clean up the code there to get it merged into the mainstream fullcalendar project.
There is a https://dhtmlx.com/docs/products/dhtmlxGantt/ which has a resource view as well. You can integrate it with full calendar. It's quite simple.

Categories

Resources