zoukankan      html  css  js  c++  java
  • Extjs中grid行的上移和下移

    一、将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移

     1 var up = new Ext.Action({
     2     text : 'Up',
     3     icon : 'up.png',//或者添加样式iconCls
     4     disabled : true,
     5     handler : function() {
     6         var record = grid.getSelectionModel().getSelected();
     7         if (record) {
     8             var index = grid.store.indexOf(record);
     9             if (index > 0) {
    10                 grid.store.removeAt(index);
    11                 grid.store.insert(index - 1, record);
    12                 grid.getView().refresh(); // refesh the row number
    13                 grid.getSelectionModel().selectRow(index - 1);
    14             }
    15         } else {
    16             Ext.Msg.alert('Warning', 'Please select one item!');
    17         }
    18     }
    19 });
    20 
    21 var down = new Ext.Action({
    22     text : 'Down',
    23     icon : 'down.png',//或者添加样式iconCls
    24     disabled : true,
    25     handler : function() {
    26         var record = grid.getSelectionModel().getSelected();
    27         if (record) {
    28             var index = grid.store.indexOf(record);
    29             if (index < grid.store.getCount() - 1) {
    30                 grid.store.removeAt(index);
    31                 grid.store.insert(index + 1, record);
    32                 grid.getView().refresh(); // refesh the row number
    33                 grid.getSelectionModel().selectRow(index + 1);
    34             }
    35         } else {
    36             Ext.Msg.alert('Warning', 'Please select one item!');
    37         }
    38     }
    39 });

    二、grid行的拖动实现上移和下移

     1 var grid = new Ext.grid.GridPanel({
     2     layout : 'fit',
     3     loadMask : true,
     4     enableDragDrop : true,
     5     ddGroup: "GridDD",
     6     viewConfig : {
     7         forceFit : true,
     8         enableRowBody : true,
     9         showPreview : true,
    10         cls:"x-grid-empty",
    11         emptyText:  _('ID_NO_RECORDS_FOUND')
    12     },
    13     listeners : {
    14         'afterrender' : function() {
    15             var ddrow = new Ext.dd.DropTarget(grid.container, {  
    16                 ddGroup : 'GridDD',  
    17                 copy    : false,  
    18                 notifyDrop : function(dd, e, data) {  
    19                     var rows = data.selections;  
    20                     var index = dd.getDragData(e).rowIndex;   
    21                     if(typeof(index) == "undefined") return;  
    22                     for(i = 0; i < rows.length; i++) {  
    23                         if(!this.copy) {
    24                             grid.getStore().remove(rows[i]);  
    25                             grid.getStore().insert(index, rows[i]);  
    26                             grid.view.refresh();
    27                         }
    28                     }  
    29                 }
    30             }); 
    31         }
    32     }
    33 });
  • 相关阅读:
    Linq to sql(八):继承与关系(二)
    Linq to sql(八):继承与关系(三)
    Linq to sql(八):继承与关系(五)
    div水平、垂直居中
    【转】C#读取QQ纯真IP数据库中的数据
    Flash被层遮挡的解决办法
    简易自定义分页
    网站来访者IP及地址记录
    安家第一篇
    天龙八部服务器端共享内存的设计
  • 原文地址:https://www.cnblogs.com/h07061108/p/extjs_grid_up_down.html
Copyright © 2011-2022 走看看