之前的專案中雖然也經常使用到extjs,但或許是沒有注意到,也或許是根本就沒有需要用到這個功能.

前幾天在和客戶討論需求時,客戶說想要能夠將gird表中的資料複製出來,當時沒多想,感覺這功能extjs應該是支援的,應該配置一個後幾個引數就能搞定的吧.可是回來後查extjs的api才發現好像根本就沒有這個設定的.再回想之前的專案中,好像確實沒有做過這個功能.所以趕緊就到網上找了,也找個來一些解決方案,但感覺實現起來比較麻煩,也沒去試.

 今天再想到這個問題時,突然一個想法在腦海中閃現,應該能夠借用gird的單元格編輯功能來實現複製的效果吧.於是趕緊去測試下,結果還真可以,程式碼如下:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"
 
[email protected]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    <span style="color:#ff6666;">plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            pluginId:'rowEditing',
            clicksToEdit: 1
        })
    ],</span>
    columns: [
        { text: 'Name',  dataIndex: 'name' ,
         <span style="color:#ff6666;">editor:{
             xtype: 'displayfield'
         }</span>
        },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
 

感覺效果還不錯吧,

總結起來,優點很明顯就是實現簡單方便,支援各種版本的extjs.而確定就是不支援行復制,而且需要為每個column中都寫一個editor.

今天才發現,原來Extjs 本來就支援grid複製(增加viewConfig:{enableTextSelection:true}即可),哎... 程式碼如下:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"
 
[email protected]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    viewConfig:{enableTextSelection:true},
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});