Extjs best practises

 

 

 

 

                                                            1.use MVC

2.use xtype

3.define custom xtypes

4.use compressor - give minified files to client

5.use SenchaArchitect or cmd

6.travese dom using up/down etc - dont give ID and dont get by ID to elements

7.use icons instead of "text+icons"

8.inject images using css

9.use theming

10.avoid using deprecated commands and use new commands like using Ext.launch method

instead of Ext.onReady

11.dont declare deep tree... use layouts precisely... try to keep things with in 2 or 3

levels

12.Reuse the components

13. Try to do population and manipulation in afterRenderer than in beforeRenederer

14.Always handle exceptions, especially failure cases of a Ajax call

 

While trying samples with Ext.tab.Panel, as usual I though about the next step of using nested panels and load an external html file into a panel.

And I tried a few simple straight forward stuffs and for some reason it kept failing. Eventually I came up with an answer as usual. Guess I dont want to be stuck with this silly issue every again. And hence this post. Following is a part of my practise project which is necessary for the nested tab implementation

I have the following in code in the head section of my "index.html" file

 <!-- STYLES -->

    <link rel="stylesheet" type="text/css" href="\ext-4.2.1.883/resources/css/ext-all.css">

    <!-- LIBS -->

    <script type="text/javascript" src="\ext-4.2.1.883/ext-all-debug.js"></script>

    <!-- APP -->

    <script type="text/javascript" src="./app.js"></script>

The contents of my "external.html" file are as follows
<div id='karthick'>
My Custom text from an external HTMl
</div>

And the following in my "app.js" file

 Ext.require('Ext.tab.*'); Ext.application({ name: "Tab Panel example", launch : function() { var tabs = Ext.create('Ext.tab.Panel', { width : 450, height: 400, renderTo: document.body, activeTab : 0, id:'parentTab', items : [{ title:'Home', itemId : 'tab1', xtype: 'container', loader: { url: 'external.htm', autoLoad: true }, closable : true }, { title:'Away', itemId : 'tab2', closable : true, items:[{ xtype:'tabpanel', items : [{ title: 'Nested Tab 1', itemId : 'nested tab1', closable : true, html:'nested tab1' },{ title: 'Nested Tab 2', itemId : 'nested tab2', closable : true, html:'nested tab2', disabled:true }] }] }] }); } });

So the end result is as follows

The highlights in this example are
1. You are using a nested tabbed table created through Ext-js 4.2
2. It implements some inbuilt properties like
- closable:true
- and disable:true
3. You have included an external html file's content into your page


Note: this example wont work if you are trying this example in a local stand alone machine. Use a server like tomcat or IIS, because, the inclusion of content from an other html file includes AJAX requests in the back end by Ext-JS which would definitely fail in local or conclusively it requires a server to operate

Nested Tab example in Ext-Js

While trying samples with Ext.tab.Panel, as usual I though about the next step of using nested panels.

And I tried a few simple straight forward stuffs and for some reason it kept failing. Eventually I came up with an answer as usual. Guess I dont want to be stuck with this silly issue every again. And hence this post. Following is a part of my practise project which is necessary for the nested tab implementation

You can safely omit external.htm file for now

I have the following in code in the head section of my "index.html" file

 <!-- STYLES -->

    <link rel="stylesheet" type="text/css" href="\ext-4.2.1.883/resources/css/ext-all.css">

 

    <!-- LIBS -->

    <script type="text/javascript" src="\ext-4.2.1.883/ext-all-debug.js"></script>

 

    <!-- APP -->

    <script type="text/javascript" src="./app.js"></script>

And the following in my "app.js" file

Ext.require('Ext.tab.*');

Ext.application({

name: "Tab Panel example",

launch : function() {

var tabs = Ext.create('Ext.tab.Panel', {

width : 450,

height: 400,

renderTo: document.body,

activeTab : 1,

id:'parentTab',

items : [{

title:'Home',

itemId : 'tab1',

html: 'First tab content',

closable : true

}, {

title:'Away',

itemId : 'tab2',

closable : true,

items:[{

xtype:'tabpanel',

items : [{

title: 'Nested Tab 1',

itemId : 'nested tab1',

closable : true,

html:'nested tab1'

},{

title: 'Nested Tab 2',

itemId : 'nested tab2',

closable : true,

html:'nested tab2',

disabled:true

}]

}]

}]

});

}

});

The end result that I obtained is as follows. 

:)