Ext Js Getting Started I.

Environment Settings

1. Zend Server
We will use zend server to create this application. So, please read zend getting started document first to understand the details.

2. Ext Js 4.0 vs Ext Js 3.1

After download the Ext Js, extract it on C:\Program Files\Zend\Apache2\htdocs.

Page | 1

Open your browser, and browse for http://localhost:90/extjs/.

Page | 2

II.

Development

1. Create simple layout using Ext Js i. Open Ext Js Example about layout types Browse for http://localhost:90/extjs/examples/layout-browser/layout-browser.html.

In this examples which is provided by Ext Js itself, you can see that there are 11 Basic Layout types on Ext Js. Even, Ext JS provided a way to custom you layout. Now, you can click on Border type layout.

Page | 3

The point is in border layout, there are 8 regions (as far as I know). In this example, the south position named Footer, center named Main Content, west named Navigation. Here is the examples code :
layout:'border', defaults: { collapsible: true, split: true, bodyStyle: 'padding:15px' }, items: [{ title: 'Footer', region: 'south', height: 150, minSize: 75, maxSize: 250, cmargins: '5 0 0 0' },{ title: 'Navigation', region:'west', margins: '5 0 0 0', cmargins: '5 5 0 0', width: 175, minSize: 100, maxSize: 250 },{ title: 'Main Content', collapsible: false, region:'center',

Page | 4

margins: '5 0 0 0' }]

ii. More specific about Border layout The border layout specific example is provided here http://localhost:90/extjs/examples/layout/border.html.

You can see the source code on http://localhost:90/extjs/examples/layout/border.js. iii. Create Ext Js View with Border type layout Now, we will create our first view using this border type. Now, you need to create these 2 files just the picture below.

The location is on C:\Program Files\Zend\Apache2\htdocs\trainingsession - ext js. Now Open sharingsession extjs.html. Page | 5

Add the following code.

We will use border.js to create ext js view so we need to put it on our html file (which is in this case is trainingsession extjs.html). Now, open border.js with your editor. Add the following code

Page | 6

I simply copy paste the code from layout examples above. Now, refresh your browser for url : http://localhost:90/trainingsession - ext js/trainingsession - extjs.html. Here is the result.

Page | 7

ou

2. Add Form Now, We will add form into Main Content Region. We will add this form into our layout : http://localhost:90/extjs/examples/form/field-types.html.

Page | 8

Now, you just click on field-types.js. and copy the following code.

Page | 9

Paste that code on form.js. and added this js into our html files. Here is the screen shot.

Page | 10

Change the following code .

In trainingsession ext js.html , add the reference code to form.js just like this.

Page | 11

Refresh browser.

3. Integrated with Zend Framework Now, we will integrated this view within zend framework.

Page | 12

i.

Create Zend Framework with the name trainingsessionwithextjs

ii. iii.

Move these project into folder htdocs. Move javascript files (form.js and border.js) into [project]/style/javascript

Open index.phtml, /application/views/scripts/index.phtml And copy and paste code from our html file.

Change the path as shown below.

Page | 13

Refresh the browser for url : http://localhost:90/trainingsessionextjs/public/

iv. Create action button for post the form into our controller. Let see the examples provided by Ext Js, http://localhost:90/extjs/examples/menu/actions.html. Now we will add action button (just like register user on zend framework training). Now, open http://localhost:90/extjs/examples/menu/actions.js to see the source code. We just need the following code to be added in our project (application).

Page | 14

Now, open form.js again, and paste that code.

Now, we will add this action button to dockedItems in our forms. Lets see the following picture.

Page | 15

Refresh your browser, its should be like this.

Now, we will add icon images based on icon definition on the script (iconCls: 'icon-add'). Open again index.phtml. and add the following code.

Page | 16

Refresh again your browser, see the difference.

Now, try to click the button, there should be no effect on it, since we didnt put any action there. Now, well put action to get the form data and show the notification using MessageBox. First, lets put script for show message box (see the example on http://localhost:90/extjs/examples/message-box/msgbox.html). We will use standard alert message dialog from Ext Js.

So, when we click on action button, it will show like the following picture

Page | 17

Now, we need to read the form data. In Ext Js, you can use getForm().getValues() to get all form data. Here is the example in our case. And, we will use Ext Ajax, too to send the data to submitController.

Now, copy paste SubmitController, the models that we already created in Zend Framework training session before and do a little modification on it. Here is the following code. Page | 18

Now, change the name attribute on our form to match our submitcontroller. Here is what I mean.

Page | 19

Refresh, and click on button action.

Page | 20

Page | 21