Blog Archive

ExtJs 4 MVC Architecture tutorial using Java Servlets - Part 3

Click here for previous Chapter
In the previous post we have defined the Application(app.js), Model(Item.js), Store(Items.js), GridPanel(List.js) and Window for editing(Edit.js). In this chapter we are going to discuss the controller which is going to bind all the things together and make our application work. Before that lets see how our grid and the window looks like.

ExtJs 4 MVC Architecture tutorial using Java Servlets
ExtJs 4 MVC Architecture tutorial using Java Servlets

ExtJs 4 MVC Architecture tutorial using Java Servlets


Step 9: Define the controller that will bind everything together - Items.js

Ext.define('IN.controller.Items', {
            extend : 'Ext.app.Controller',

            //define the stores
            stores : ['Items'],
            //define the models
            models : ['Item'],
            //define the views
            views : ['item.List', 'item.Edit', 'item.MyNumberField'],

            //special method that is called when your application boots
            init : function() {
                
                //control function makes it easy to listen to events on
                //your view classes and take some action with a handler function
                this.control({
                    
                            //when the viewport is rendered
                            'viewport > panel' : {
                                render : this.onPanelRendered
                            },
                            
                            //when you double click on the grid layout
                            'itemlist' : {
                                itemdblclick : this.editItem
                            },
                            
                            //when you click in the grid toolbar Add button
                            'itemlist button[action=add]' : {
                                click : this.addItem   
                            },
                            
                            //when you click on the Edit window save button
                            'itemedit button[action=save]' : {
                                click : this.updateItem
                            }
                        });
            },

            onPanelRendered : function() {
                //just a console log to show when the panel si rendered
                console.log('The panel was rendered');
            },

            addItem : function() {
                //create the window and set the mode to Add
                var view = Ext.widget('itemedit');
                view.addMode = true;
            },

            editItem : function(grid, record) {
                //create the window for editing
                //the double click on the row sends the grid row record
                var view = Ext.widget('itemedit');
                //load the record into the form
                view.down('form').loadRecord(record);
                //get the Item Number field in the form and protect it
                view.down('form').getComponent('itemNumber').setReadOnly(true);
                
            },

            updateItem : function(button) {
                //get access to the window using the button reference
                var win = button.up('window');
                //get access to the form using the window reference
                form = win.down('form');
                
                //Add an Item
                if(win.addMode){
                    //check if the form passed all validations
                    if(form.getForm().isValid()){
                        //if there are no errors then send the Add request to server
                        Ext.Ajax.request({
                            url: 'ItemMaintenance',
                            params: {
                            company: 1,
                            //this encodes the form values to a JSON object
                            addData: Ext.encode(form.getValues())
                            },
                            scope:this,
                            //method to call when the request is successful
                            success: this.onSaveSuccess,
                            //method to call when the request is a failure
                            failure: this.onSaveFailure
                        });
                        //close the window
                        win.close();
                    }
                }
                else {
                    //get reference to the record
                    record = form.getRecord();
                    //get reference to the form values
                    values = form.getValues();
                    //set the record with new values
                    record.set(values);
                    //close the window
                    win.close();
                    //Ask the stote to sync the new data with the server
                    this.getItemsStore().sync();
                }
            },
            
            onSaveFailure: function(err){
                //Alert the user about communication error
                Ext.MessageBox.alert('Status', 'Error occured during Item Add');
            },
   
            onSaveSuccess: function(response){
                //Alert the user about communication error
                Ext.MessageBox.alert('Status', 'Item successfully Added');
                //load the store to get the new Item that was added
                this.getItemsStore().load();
            }
        
    });

Now we need to work on the server side so that our ExtJs request can be processed!
Lets define the Java bean, JDBC connections to the database and our Servlet that will interact with the ExtJs application.

ExtJs 4 MVC Architecture tutorial using Java Servlets

Step 10: Define the java bean - Item.java

package com.as400samplecode.util;

public class Item {
   
    String status = null;
    String item = null;
    String desc1 = null;
    String desc2 = null;
    Double weight = null;
   
    public String getStatus() {
        return status;
    }
    public void setStatus(String status) {
        this.status = status;
    }
    public String getItem() {
        return item;
    }
    public void setItem(String item) {
        this.item = item;
    }
    public String getDesc1() {
        return desc1;
    }
    public void setDesc1(String desc1) {
        this.desc1 = desc1;
    }
    public String getDesc2() {
        return desc2;
    }
    public void setDesc2(String desc2) {
        this.desc2 = desc2;
    }
    public Double getWeight() {
        return weight;
    }
    public void setWeight(Double weight) {
        this.weight = weight;
    }
   
}

Click here for next Chapter


4 comments :

  1. Can u please provide code(i.e download project)

    ReplyDelete
  2. Vương Lâm hơi suy nghĩ một chút, dựa theo như Ti Đồ Nam dự đoán, Nghịch

    Thiên Châu phải hấp thu Kim, Mộc, Thủy, Hỏa, Thổ ngũ hệ linh khí mới đạt

    cảnh giới viên mãn. Lúc ấy mới xem như chính thức mở ra hạt châu để cho

    người khác nhận chủ.

    Thủy linh khí đã sớm viên mãn, cho nên trên những hình khắc đám mây trên

    hạt châu đã sớm biến mất, thay vào đó là hình những lá cây, như muốn

    nói nó cần hấp thụ linh khí Mộc thuộc tính.
    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

    Tuy nhiên, linh khí thuộc tính Mộc có tài liệu rất khó tìm, Vương Lâm đã

    từng ở chợ giao dịch của Đằng Gia thành nhìn thấy mấy cái, nhưng chúng

    đều có giá trên trời. Hơn nữa, hắn cũng không biết nếu như có những tài

    liệu này thì làm sao để cho hạt châu có thể hấp thu? Thậm chí ngay cả

    khi có tài liệu Mộc thuộc tính cũng không chắc chắn có thể làm cho hạt

    châu tiến hóa, cho nên hắn mới bỏ đi ý niệm mua chúng.

    Nhưng bây giờ nhìn lại, trên hạt châu tự nhiên lại xuất hiện thêm một

    ReplyDelete
  3. Hi
    when I run the application (index.html) nothing is displayed ....

    ReplyDelete