Jquery and Extjs Simplest Tutorial

Question

I want link to tutorial for JQuery and ExtJs which will cover following contents or Topics

Note: PLease do not provide me link of their sites i know them.

1. How to setup both of the packages.

It is required as its essential.

1. How to access a DIV element

2. How to get all the elements in a div like checkboxes, radio buttons, div etc

3. How to position a DIV with respect another DIV (It Sholud be cross browser compliant)

etc

PLease do let me know

Answer 1

1. Create a script directory on your web project.
2. Download the packages and extract the files in your script directory.
3. Add the appropriate script tags for each package (note that you have to use exJs' support for JQuery, otherwise you would have two methods for accessing the elements of your page). The tutorial Basic Page Setup describes what you need to do - see additional information below!
4. Try to follow some of the tutorials. It would take too long to describe what you have to do to achieve this or that (which we don't even know). Studying the tutorials and reproducing some of the results should set you back half a day or a day. (Exjs tutorials: http://www.extjs.com/learn/Tutorials and http://www.extjs.com/learn/Main_Page, JQuery tutorials: http://docs.jquery.com/Tutorials).

Note for step 3: When following the Basic Page Setup tutorial, prefix all ext/ directories with the path to your script directory, e.g. "/myScriptDir/" (used from here on to represent your script directory). Additionally replace

<script type="text/javascript" src="/myScriptDir/ext/adapter/ext/ext-base.js"></script>

with

<script type="text/javascript" src="/myScriptDir/jquery-jquery-1.4.2.min.js"></Script>
<script type="text/javascript" src="/myScriptDir/ext/adapter/ext/ext-base.js"></script>

For accessing the elements on you page you can use JQuery selectors, e.g.

1. var divs = $('div'); // gets the div elements in the document
2. var inputs = $('div input'); // gets the input elements inside a div in the document

And just at the end some friendly advice: To solve a problem you have to be prepared to learn. Never assume that the solution will be presented as a gift.

Answer 2

Ext JS

Take a look at the Ext Core Manual http://www.extjs.com/products/extcore/manual/

How to setup both of the packages.

1. Download Ext Core
2. Link ext-core-debug.js via a script tag (

Check out the Overview section of the manual.

How to access a DIV element

var div = Ext.get('idOfDiv');

Check out the Element -> Getting Elements section of the manual.

How to get all the elements in a div like checkboxes, radio buttons, div etc

Using the above div reference

var inputs = div.select('input');

Check out DomQuery and Composite Elements section of the Core Manual

How to position a DIV with respect another DIV (It Sholud be cross browser compliant)

You can use the positioning methods of Ext.Element, getXY, getLeft, getTop, etc and the corresponding setXY, setLeft, setTop, etc

Check out Element -> Positioning in the Ext Core Manual

Answer 3

It is obvious that Mandrex1's primary language is not English. What he was trying to ask are the links to any information on how to use DIV in an integrated jquery and extjs scenario. He was also requesting everyone not to bother posting links on setting up an integrated jquery and extjs because he already knew how to do it.

He is not lazy. In fact, he is quite resourceful because he was asking where to find those information rather than asking for the actual solution to his problem.