ExtJS4.2学习(11)可拖放的表格



 单纯的数据展示是不是太单调了?来,这次咱来个互动性强的,表格的行、列可随意拖放,不仅如此,还可以多个表格之间随意拖动。RmF思考者日记网-束洋洋个人博客

先来看下第一个例子,通过拖放改变表格大小:RmF思考者日记网-束洋洋个人博客

QQ截图20131118224711.jpgRmF思考者日记网-束洋洋个人博客

主要代码,其实之前的代码并不需要改变多少,只需要加入以下代码即可:RmF思考者日记网-束洋洋个人博客

 var columns = [  
      {header:'编号',dataIndex:'id'},  
      {header:'名称',dataIndex:'name'},  
      {header:'描述',dataIndex:'descn'}  
  ];  
  
  var data = [  
      ['1','name1','descn1'],  
      ['2','name2','descn2'],  
      ['3','name3','descn3'],  
      ['4','name4','descn4'],  
      ['5','name5','descn5']  
  ];  
  
  var store = new Ext.data.ArrayStore({  
data: data,  
fields: [  
          {name: 'id'},  
          {name: 'name'},  
          {name: 'descn'}  
      ]  
  });  
  store.load();  
  
  var grid = new Ext.grid.GridPanel({  
      renderTo: 'grid',  
      store: store,  
      columns: columns  
  }); 

 RmF思考者日记网-束洋洋个人博客

来解释下属性什么意思?RmF思考者日记网-束洋洋个人博客

Resizable()函数必须放在render之后,否则会出现问题。RmF思考者日记网-束洋洋个人博客

第一个参数是grid,就是说这个可改变大小的区域是在div id="grid" 这个元素上起作用。RmF思考者日记网-束洋洋个人博客

wrap:true,这个参数会在构造Resizable()函数时自动在指定id的外边包裹一层div,这样就不用在HTML里定义其他附属的div了。RmF思考者日记网-束洋洋个人博客

minHeight:100,它限制改变的最小高度。RmF思考者日记网-束洋洋个人博客

pinned:true,此参数控制可拖放区域的显示状态。如果值为true,则可拖放区域会一直显示在表格下方;如果值为false,只有鼠标悬停在可拖放区域上方时才会出现。具体配置取决于个人爱好。RmF思考者日记网-束洋洋个人博客

handles:'s',s即south。Ext中用东、南、西、北对应上、下、左、右,用首字母来设置可以拖放的方向。RmF思考者日记网-束洋洋个人博客

最后别忘了注册resize事件,在拖放完成之后,表格会调用setHeight()方法修改自己的大小,re.on()函数的第3个参数是函数执行的scope。RmF思考者日记网-束洋洋个人博客

 RmF思考者日记网-束洋洋个人博客

第2个例子,在同一个表格中拖放RmF思考者日记网-束洋洋个人博客

Ext的表格内置了对拖放的支持,所以使用起来非常方便,只需要设置gridviewdragdrop插件就行了,具体代码如下:RmF思考者日记网-束洋洋个人博客

var grid = new Ext.grid.GridPanel({  
    renderTo: 'grid',  
    store: store,  
    columns: columns,  
    viewConfig:{ //加入此代码可在同一个表格里拖放  
        plugins:{  
            ptype:'gridviewdragdrop'  
        }  
    }  
});

 RmF思考者日记网-束洋洋个人博客

嘿嘿,现在上效果图:RmF思考者日记网-束洋洋个人博客

02.jpgRmF思考者日记网-束洋洋个人博客

什么,你觉得这样还不过瘾,记得我在文章开头提过,还可以多个表格之间相互拖拽,那么现在来看看代码:RmF思考者日记网-束洋洋个人博客

Ext.onReady(function(){  
  
    var store1 = new Ext.data.ArrayStore({  
        data: [  
            ['01','name01','descn01'],  
            ['02','name02','descn02'],  
            ['03','name03','descn03'],  
            ['04','name04','descn04'],  
            ['05','name05','descn05']  
        ],  
        fields: [  
            {name: 'id'},  
            {name: 'name'},  
            {name: 'descn'}  
        ]  
    });  
    var store2 = new Ext.data.ArrayStore({  
        data: [  
            ['11','name11','descn11'],  
            ['12','name12','descn12'],  
            ['13','name13','descn13'],  
            ['14','name14','descn14'],  
            ['15','name15','descn15']  
        ],  
        fields: [  
            {name: 'id'},  
            {name: 'name'},  
            {name: 'descn'}  
        ]  
    });  
  
    store1.load();  
    store2.load();  
  
    var columns = [  
        {header:'编号',dataIndex:'id'},  
        {header:'名称',dataIndex:'name'},  
        {header:'描述',dataIndex:'descn'}  
    ];  
  
    var grid1 = new Ext.grid.GridPanel({  
        autoHeight: true,  
        renderTo: 'grid1',  
        store: store1,  
        columns: columns,  
        enableDragDrop: true,  
        viewConfig: {  
            plugins: {  
                ptype: 'gridviewdragdrop'  
            }  
        }  
    });  
    var grid2 = new Ext.grid.GridPanel({  
        autoHeight: true,  
        renderTo: 'grid2',  
        store: store2,  
        columns: columns,  
        enableDragDrop: true,  
        viewConfig: {  
            plugins: {  
                ptype: 'gridviewdragdrop'  
            }  
        }  
    });  
}); 

 RmF思考者日记网-束洋洋个人博客

上效果图:RmF思考者日记网-束洋洋个人博客

03.jpgRmF思考者日记网-束洋洋个人博客

好了,本章到此结束,下章开始讲扩展插件,等所有扩展插件讲完,表格控件就到此结束了,你也来动手试试吧。RmF思考者日记网-束洋洋个人博客

 RmF思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridRmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridRmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingRmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格RmF思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldRmF思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件RmF思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorRmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 RmF思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解RmF思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目RmF思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈