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

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

之前的項目中雖然也經常使用到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'),    <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複製到GRID

說下我的思路吧，grid的資料主要來源於store，那麼在點擊按鈕事件中可以這樣做，獲得當前左邊選中的資料，從左邊的store中將選中的資料刪除，同時將選中的資料添加的右邊的store中去，技術點有兩個，一個是獲得選中的store，另一個是對store資料中增加和刪除，第二個技術點可以看看api，裡面應該有。
 
對於extjs grid複製粘貼功可以

editor : new Ext.form.DateField({id: "id1"}),renderer : function(value,metadata,record,rowIndex,colIndex,store){ //這裡有record，有stroe，你想要的值不都有了麼 //比如，這個加在第三列，然後你肯定知道行數，用store定位到某行的record，那麼所有的值不都有了麼，然後想怎麼賦值不就怎麼賦值（複製）了麼 }
詳細的你可以查api
Ext.grid.Column中：
renderer: Function(可選)當該方法通過傳遞以下參數時，會返回可顯示的資料:value : Object該儲存格的資料值。metadata : Object一個對象，您可以在其中設定以下屬性: css : String一個添加到該儲存格的TD元素上的CSS樣式名。attr : String一個定義HTML 屬性的字串，應用到資料容器內的表格儲存格元素上(例如:'style="color:red;"')。record : Ext.data.record從資料中提取的Ext.data.Record。rowIndex : NumberRow indexcolIndex : NumberColumn indexstore : Ext.data.Store從該Ext.data.Store對象中提取記錄。
另外幾個你會用到的方法
Ext.data.Store中：
getAt(Number index) : Ext.data.Record擷取指定位置的記錄。參數: index : Number需要尋找的記錄的索引位置。傳回值: Ext.data.Record 所傳遞的索引位置的Record。 如果沒有找到，返回undefined
Ext.data.Record中：
get(String name ) : Object擷取指定名稱欄位 的值。參數: name : String需要擷取值的欄位名稱 傳回值: Object 欄位的值。set(String name , String/Object/Array value ) : void將欄位名 設定為指定的值。