extjs grid 複製問題另一種解決方案.

extjs grid 複製問題另一種解決方案.

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

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

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

Ext.create('Ext.data.Store', {    storeId:'simpsonsStore',    fields:['name', 'email', 'phone'],    data:{'items':[        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },        { 'name': 'Marge', "email":"marge@simpsons.com", "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'),    plugins: [        Ext.create('Ext.grid.plugin.CellEditing', {            pluginId:'rowEditing',            clicksToEdit: 1        })    ],    columns: [        { text: 'Name',  dataIndex: 'name' ,         editor:{             xtype: 'displayfield'         }        },        { text: 'Email', dataIndex: 'email', flex: 1 },        { text: 'Phone', dataIndex: 'phone' }    ],    height: 200,    width: 400,    renderTo: Ext.getBody()});

效果如下:

感覺效果還不錯吧,

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