Extjs 4.2 Grid增刪改及后臺交互(Java)打賞

上次發了Easyui Datagrid的增刪改查的使用學習記錄后一直想整理下基于Extjs4.2的Grid學習使用記錄。苦于抽不出時間,一直拖到現在。不得不說,Extjs確實很強大,新版的Neptune風格也很入我眼,但畢竟沒怎么用過,第一次用,也不敢上來就搞什么自定義組件,也就純粹的model+store+panel聲明式創建表格了。

拋開分頁,拋開排序,今天只簡單講一下最近使用中總結出來的rest形式增刪改查數據的方式。發現這種方式挺不錯的,故而分享下。
代碼Example如下:
定義Model

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [{name: 'id',
        type: 'int',
        useNull: true
    }, 'email', 'first', 'last'],
    validations: [{ type: 'length',
        field: 'email',
        min: 1
    }, {type: 'length',
        field: 'first',
        min: 1
    }, {type: 'length',
        field: 'last',
        min: 1
    }]
});


構造store、創建panel

var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'Person',
        proxy: {
             type: 'ajax',
             api: {
                read: 'url/read',//查詢
                create: 'url/create',//創建
                update: 'url/update',//更新
                destroy: 'url/destroy'//刪除
            },
            reader: {
                type: 'json',
                root: 'data'
            },
            writer: {
                type: 'json'
            }
        },
        listeners: {
            write: function(store, operation){
                var record = operation.getRecords()[0],
                    name = Ext.String.capitalize(operation.action),
                    verb;
                    
                    
                if (name == 'Destroy') {
                    record = operation.records[0];
                    verb = 'Destroyed';
                } else {
                    verb = name + 'd';
                }
                Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
                
            }
        }
    });
    
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        listeners: {
            cancelEdit: function(rowEditing, context) {
                // Canceling editing of a locally added, unsaved record: remove it
                if (context.record.phantom) {
                    store.remove(context.record);
                }
            }
        }
    });
    
    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: document.body,
        plugins: [rowEditing],
        width: 400,
        height: 300,
        frame: true,
        title: 'Users',
        store: store,
        iconCls: 'icon-user',
        columns: [{
            text: 'ID',
            width: 40,
            sortable: true,
            dataIndex: 'id'
        }, {
            text: 'Email',
            flex: 1,
            sortable: true,
            dataIndex: 'email',
            field: {
                xtype: 'textfield'
            }
        }, {
            header: 'First',
            width: 80,
            sortable: true,
            dataIndex: 'first',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: 'Last',
            width: 80,
            sortable: true,
            dataIndex: 'last',
            field: {
                xtype: 'textfield'
            }
        }],
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Add',
                iconCls: 'icon-add',
                handler: function(){
                    // empty record
                    store.insert(0, new Person());
                    rowEditing.startEdit(0, 0);
                }
            }, '-', {
                itemId: 'delete',
                text: 'Delete',
                iconCls: 'icon-delete',
                disabled: true,
                handler: function(){
                    var selection = grid.getView().getSelectionModel().getSelection()[0];
                    if (selection) {
                        store.remove(selection);
                    }
                }
            }]
        }]
    });
    grid.getSelectionModel().on('selectionchange', function(selModel, selections){
        grid.down('#delete').setDisabled(selections.length === 0);
    });

很簡單,使用api的方式,包括有增刪查改,在前臺的操作都會被extjs記錄下來,再執行sync的時候就可以自動根據狀態請求相應的url了。

下面是使用中遇到的一些小問題總結。
1、刪除多行數據
例子里使用的是var selection = grid.getView().getSelectionModel().getSelection()[0];注意是加了個[0]的,所以要刪除多行,直接取消這個[0],然后執行store即可,前提是你的表格沒有限制只能選取一行,默認情況下,cellmodel的mode值為SINGLE,使用checkboxmodel就可以顯示checkbox的同時實現多選了。

2、增刪查改的同時進行傳參
這個一開始同事懶得研究就直接在url里拼上去了,我覺得這樣不妥,就查了下相關文章,最終得到兩種實現方法
方法一:僅在查詢時可用,設置store的autoload為false,手動載入store.load({//to do something});,這樣使用查詢是可以但是修改刪除或者更新時就不好用了。于是有了方法二;
方法二:添加事件監聽,在store里面設置linstener,監聽beforeload時執行方法,設置Param,如:

listeners: {
                beforeload: function(proxy, response, operation){
                   
                }
            }

3、后臺動態構造表頭不能設置renderer
由于業務特殊性,我們在后臺構造json對象包裝extjs grid所需的fields、columns,也正因此,不能在后臺設置renderer等調用js函數的屬性,我的解決方式是,后臺添加固定標識,數據到前臺后遍歷添加所需renderer函數或者特殊編輯器等

后臺交互
與后臺的交互在一開始還是糾結了半天,沒看清楚extjs的實現,原來使用這種方式的請求除了擴展參數以外,表格數據都是通過流交互的。這個在后臺是不能直接使用request.getParamter("xxx");獲取的,因為是使用流,所以需要通過get請求的流來讀取數據,又因為是文本數據,所以直接request.getReader().readLine();獲取到的就是json格式的字符串了,接下來就需要自己根據需要進行轉換了,個人還是使用json.simple,當然了,具體情況具體對待,如果你的數據有其他的比如文件上傳之類的,就需要先獲取inputstream再解析了。

就總結這么多了,有任何問題,歡迎留言交流

Extjs 4.2 Grid增刪改及后臺交互(Java)
文章《Extjs 4.2 Grid增刪改及后臺交互(Java)》二維碼
  • 微信打賞
  • 支付寶打賞

已有4條評論

  1. yiwuxun

    膜拜中。。關于“后臺交互”,樓主還有文章嗎?好希望做一個出來

    2014-09-25 08:30 回復
    • 樸人博客

      具體可以看下官網的api,我只是說簡單介紹下rest api的形式

      2014-09-30 15:30 回復
  2. 懸案

    博主辛苦,博客不錯!希望能看到博主更優秀的文章!

    2013-06-09 18:40 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖