跟我一起學extjs5(19--模組記錄的拖放刪除、拖放複製新增)，extjs519--

跟我一起學extjs5(19--模組記錄的拖放刪除、拖放複製新增)，extjs519--
跟我一起學extjs5(19--模組記錄的拖放刪除、拖放複製新增)        網頁當中的拖放(drag-drop)是比較有趣的操作，extjs5中很好的封裝了拖放的動作，也有各種類來支援，但是要學好“拖放”這個東西真是很難，特別是象我這樣英語不好的人，看不太懂官網上的說明，做一個拖放的操作起碼得幾天的時間。        下面完成拖放刪除的功能。即，選中一條記錄或多條記錄，然後拖動到“刪除”按鈕上，最後鬆開滑鼠進行記錄刪除的操作。操作步驟：        1、給Grid增加新的配置，使其記錄允許拖動。在Grid.js中的initComponent函數中加入

this.viewConfig = {stripeRows : true, // 奇偶行不同底色enableTextSelection : false,// 加入允許拖動功能plugins : [{ptype : 'gridviewdragdrop',ddGroup : 'DD_grid_' + viewModel.get('tf_moduleName'), // 拖動分組必須設定，這個分組名稱為:DD_grid_GlobalenableDrop : false  // 設為false，不允許在本grid中拖動}]};

來允許Grid可以進行單行或多行的拖動操作，ddGroup是一個分組，最好是設定成唯一的。enableDrop在這裡設定為false , 如果設定成true,那麼就可以拖動改變記錄的位置，這個功能也是比較有用的，例如一個模組中有一個tf_orderId 順序號的欄位，拖動以後可以自動改變順序號，那對記錄的排序將是非常方便的，這個功能以後會講到。        2、給“刪除”按鈕加入允許Drop的功能。

{text : '刪除',disabled : true,glyph : 0xf014,itemId : 'deletebutton',listeners : {click : 'deleteRecords', // 這裡不要用handler，而要用click,因為下面要發送click事件// 刪除按鈕在渲染後加入可以Drop的功能render : function(button) {// 可以使Grid中選中的記錄拖到到此按鈕上來進行刪除button.dropZone = new Ext.dd.DropZone(button.getEl(), {// 此處的ddGroup需要與Grid中設定的一致ddGroup : 'DD_grid_' + viewModel.get('tf_moduleName'),// 這個函數沒弄明白是啥意思,沒有還不行getTargetFromEvent : function(e) {return e.getTarget('');},// 使用者拖動選中的記錄經過了此按鈕onNodeOver : function(target, dd, e, data) {return Ext.dd.DropZone.prototype.dropAllowed;},// 使用者放開了滑鼠鍵，刪除記錄onNodeDrop : function(target, dd, e, data) {button.fireEvent('click', button); // 執行刪除按鈕的click事件}})}}}

        雖然沒有幾條語句，要寫出來還真是不容易。下面三個圖示範了三個過程：拖動、放下、執行click事件。





        以上即是拖動刪除的所有過程，如果要更好的瞭解拖放操作，請看官網的專題說明。
        下面再繼續做拖放複製新增的功能，先選中一條記錄，然後拖動到“新增”按鈕上，會將選中的記錄的值作為預設值(除了主鍵)來增加一條記錄。Grid中的拖動代碼已經有了，只要在“新增”按鈕上加上drop的代碼即可。

{text : '新增',xtype : 'splitbutton',itemId : 'new',glyph : 0xf016,menu : [{text : '複製新增',tooltip : '新增時先將目前記錄添入到新記錄中',itemId : 'newwithcopy',listeners : {click : 'addRecordWithCopy'},glyph : 0xf0c5}, '-', {text : '上傳Excel表單條新增',tooltip : '根據指定的excel表添好資料後，上傳新增一條記錄',glyph : 0xf062}, {text : '上傳Excel表批量新增',tooltip : '根據下載的Excel表中的要求添加資料後，上傳批量新增資料',glyph : 0xf062}],listeners : {click : 'addRecord', // 這裡不要用handler，而要用click,因為下面要發送click事件// 刪除按鈕在渲染後加入可以Drop的功能render : function(button) {// 可以使Grid中選中的記錄拖到到此按鈕上來進行複製新增button.dropZone = new Ext.dd.DropZone(button.getEl(), {// 此處的ddGroup需要與Grid中設定的一致ddGroup : 'DD_grid_' + viewModel.get('tf_moduleName'),getTargetFromEvent : function(e) {return e.getTarget('');},// 使用者拖動選中的記錄經過了此按鈕onNodeOver : function(target, dd, e, data) {return Ext.dd.DropZone.prototype.dropAllowed;},// 使用者放開了滑鼠鍵，刪除記錄onNodeDrop : function(target, dd, e, data) {var b = button.menu.down('#newwithcopy');b.fireEvent('click', b);}})}}}

        複製新增的事件放在ModuleController.js中。

// 根據選中的記錄複製新增一條記錄addRecordWithCopy : function() {var grid = this.getView().down('modulegrid'), sm = grid.getSelectionModel();if (sm.getSelection().length != 1) {Ext.toast({title : '警告',html : '請先選擇一條記錄，然後再執行此操作！',saveDelay : 10,align : 'tr',closable : true,minWidth : 200,useXAxis : true,slideInDuration : 500});return;}var model = Ext.create(grid.getStore().model);Ext.Array.each(model.fields, function(field) { // 將選中記錄的model都賦給值新的記錄model.set(field.name, sm.getSelection()[0].get(field.name));});model.set('tf_id', null); // 設定為null,可自動增加grid.getStore().insert(0, model);sm.select(model); // 選中當前新增的記錄}

        經過以上步驟，你可以執行新增菜單裡的複製新增，也可以拖動一條記錄到“新增”按鈕上來新增一條記錄。這幾節源碼改動得也比較多，如果跟著做有問題的話，下節會發布前20節的源碼，自行下載了研究吧。




怎使用js實現新增刪除可拖放的div

給你2個連結，看看你是否用得著
www.lanrentuku.com/js/window-630.html
www.lanrentuku.com/js/window-97.html
 
Ext Portal模組拖放(可實現儲存)，有沒有這方面的例子?

在網上看到過一個最完整的關於ext portal的例子.可以將ext portal拖動後的位置資訊儲存到資料庫好像還有線上demo地址應該是: faceye.com/faceye-ext-portal在右下角有線上demo的地址.