Blog Archive

ExtJs 4 MVC Architecture tutorial using Java Servlets - Part 2

Click here for previous Chapter
So far we have discussed the directory structure of an ExtJs MVC application and the index.html file that will be starting point of our application. Also we have defined the context.xml for our JDBC resource to connect to a Database Server. Lets see how our app.js will look.

Step 4: Source for app.js

Ext.Loader.setConfig({ 
    enabled: true 
    });

Ext.application({
    name: 'IN',

    appFolder: 'app',
   
    controllers: [
                  'Items'
              ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                    xtype: 'itemlist',
                }
            ]
        });
    }
});

Ext.application creates a new instance of Application class, to which we passed the name "IN". This automatically sets up a global variable IN for us, and registers the namespace to Ext.Loader, with the corresponding path of 'app' set via the appFolder config option.

The Application launch function runs automatically when everything is loaded. Here the launch function creates a Viewport which contains a single item with xtype as itemlist(still needs to be defined).

Step 5: Define the model - Item.js


A Model represents some object that your application manages. In this example we are going to use the model to represent out Product Table. Models are defined as a set of fields and any arbitrary methods and properties relevant to the model.
Ext.define('IN.model.Item', {
    extend: 'Ext.data.Model',
    fields: [
             'status',
             'item',
             'desc1',
             'desc2',
             'weight',
             ]
});

Step 6: Define the store that will contain the data - Items.js


Creating a Store is easy - we just tell it the Model and the Proxy to use to load and save its data. The Store class encapsulates a client side cache of Model objects. In the example below we configured an AJAX proxy to load data from the url 'ItemMaintenance'. Proxy uses a JsonReader to parse the response from the server into Model object.
Ext.define('IN.store.Items', {
    extend: 'Ext.data.Store',
    model: 'IN.model.Item',
    autoLoad: true,
    pageSize: 10,

    proxy: {
        type: 'ajax',
        url: 'ItemMaintenance',
        extraParams: {
            company: 1
        },
        reader: {
            type: 'json',
            totalProperty: 'totalCount',
            root: 'items',
            successProperty: 'success'
        },
     },
   
     listeners: {
         //After loading the store just commit all the records so only changes are sent when the store is synced
         load : function(store) {
             store.each(function(record) {
                record.commit();
            }); 
         } 
     }

});

Step 7: Create the Grid View Layout so that we can display list of Items - List.js


Grids are composed of two main pieces - a Store full of data and a set of columns to render. Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged <table>, GridPanel makes it easy to fetch, sort and filter large amounts of data.

In the store below we have added Paging using pagingtoolbar and a single button to Add a new Item.
Ext.define('IN.view.item.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.itemlist',
    title : 'List of Items',
    store : 'Items',
    loadMask: true,
    autoheight: true,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'Items',   
        dock: 'bottom',
        displayInfo: true,
        items: [
                { 
                    xtype: 'tbseparator' 
                },
                {
                    xtype : 'button',
                    text: 'Add Item',
                    action: 'add'
                }
        ]
    }],
    initComponent: function() {
        
        this.columns = [
            {header: 'Item Number', dataIndex: 'item',  flex: 1},
            {header: 'Description 1', dataIndex: 'desc1', flex: 1},
            {header: 'Description 2', dataIndex: 'desc2', flex: 1},
            {header: 'Weight', dataIndex: 'weight', flex: 1}
        ];

        this.callParent(arguments);
    }

    
   
});

Step 8: Create the Window Layout so that we can Add or Edit and Item - Edit.js


The window display the Item Number, Decsription1, Description 2 and weight so we can edit them. It has fit layout and also if you see the weight field has custom xtype named mynumberfield. This was done to display the weight in 2 decimal places. Click on the link below to get source for mynumberfield or just change the xtype to numberfield. In the window we have 2 buttons, one for saving the changes and the other one to close the window without making changes.

ExtJs 4 set Decimal precision using custom number field

Ext.define('IN.view.item.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.itemedit',
    addMode : false,
    title : 'Edit Item Information',
    layout: 'fit',
    autoShow: true,

    initComponent: function() {
        this.items = this.buildItems();
        this.buttons = this.buildButtons();
        this.callParent(arguments);
    },
    buildItems: function(){
        return [
                {
                    xtype: 'form',
                    items: [
                        {
                            xtype: 'textfield',
                            itemId: 'itemNumber',
                            name : 'item',
                            allowBlank: false,
                            msgTarget: 'side',
                            fieldLabel: 'Item Number',
                            size: 11,
                            maxLength: 10
                        },
                        {
                            xtype: 'textfield',
                            name : 'desc1',
                            allowBlank: false,
                            msgTarget: 'side',
                            fieldLabel: 'Description 1',
                            size: 31,
                            maxLength: 30
                        },
                        {
                            xtype: 'textfield',
                            name : 'desc2',
                            fieldLabel: 'Description 2',
                            size: 31,
                            maxLength: 30   
                        },
                        {
                            xtype: 'mynumberfield', 
                            name : 'weight',
                            value: 0,
                            minValue: 0,
                            fieldLabel: 'Weight',
                            decimalPrecision:2,
                            step:0.01
                         }
                    ]
                }
            ];
    },
    buildButtons: function(){
        return [
                {
                    text: 'Save',
                    action: 'save'
                },
                {
                    text: 'Cancel',
                    scope: this,
                    handler: this.close
                }];
    }
   
});

Click here for next Chapter


10 comments :

  1. Thanks for the post. It is very good.

    one question, where is the 'itemlist' in the app.js?

    ReplyDelete
  2. Please see step# 4 in this page for app.js source.

    ReplyDelete
  3. great tuto... itemlist is not still defined, how define it?

    ReplyDelete
  4. itemlist defined in the Step# 7, the file name is List.js and its alias is widget.itemlist

    ReplyDelete
  5. one question, what is the use of data directory???

    ReplyDelete
  6. No use of data directory in this example.

    ReplyDelete
  7. item.MyNumberField this file is missed
    please provide.

    ReplyDelete
  8. phiến lá cây. Điều này làm cho Vương Lâm phải suy nghĩ cẩn thận lại, bây

    giờ hắn không nôn nóng rời khỏi nơi đây nữa, tối thiểu phải đợi tới khi

    hạt châu tiến hóa xong. Hoặc hắn phải hiểu rõ được huyền bí trong đó

    mới ròi đi.

    Bất quá, trước đó có vài việc phải tiến hành, hàn quang trong mắt Vương

    Lâm lóe lên, hắn thu hồi hạt châu lại. Tay phải bắt quyết đánh ra một
    trung tâm kế toán tại quảng ninh trung tâm kế toán tại bình dương học kế toán tại đồng nai chotruongyen sieu nhan học kế toán tại huế dịch vụ thành lập doanh nghiệp công ty làm dịch vụ kế toán chung cư eco city long biên trà đá chém gió nguoicodanh trung tâm kế toán tại hoàng mai trung tâm kế toán dịch vụ báo cáo thuế công ty dịch vụ kế toán dịch vụ báo cáo tài chính cuối năm trung tâm kế toán tại đà nẵng

    đạo lam quang, lam quang này khi đánh trúng động bích. Trong nháy mắt

    động bích đã xuất hiện một lỗ hổng, Vương Lâm không nói hai lời liền

    theo đó đi ra, dựa theo thông lộ lúc trước đi vào, hắn không nhanh không

    chậm tiến ra ngoài.

    Thông đạo cũng không dài, không mất nhiều thời gian hắn đã đi tới đầu

    kia của thông đạo. Vừa xuất hiện, Vương Lâm phải đình chỉ cước bộ, hắn

    nhìn thấy Mộc Nhũng đang khoanh chân ngồi trong động, hắn nhìn chằm chằm

    ReplyDelete
  9. We are offering website service for your website or website design for your business......

    websites design service

    ReplyDelete