/**
* 第一个表格拖放例子
*/
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data=[
['1','name1','descn1'],
['2','name1','descn2'],
['3','name1','descn3'],
['4','name1','descn4'],
['5','name1','descn5']
];
var store = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
renderTo:'myid',
store:store,
cm:cm,
width:450,
height:130,
enableDragDrop:true,//单纯使用这个熟悉的话,只是起到拖动的功能,不能拖放
viewConfig:{ forceFit:true }
});
var rz = new Ext.Resizable(grid.getEl(),{
wrap:true,
minHeight:100,//限制改变的最小高度
pinned:true,//若为true,则拖动的区域则为一直在表格的下方.效果可以自己尝试
handles:'s'//s就是south的意思
});
rz.on('resize',grid.syncSize(),grid);
//拖放的功能
var ddrow = new Ext.dd.DropTarget(grid.container,{
ddGroup:'GridDD',//分组名称,API是这样解释的:如果一个组被定义好了,那么组内的对象只与相同的组的对象进行交互
//于是生出的表格,里面的数据,只能在Grid里进行拖放
copy:false,
notifyDrop:function(dd,e,data){
var rows = data.selections;//选择的行
var index = dd.getDragData(e).rowIndex;
if(typeof(index)=="undefined"){
return;
}
for(var i = 0;i<rows.length;i++){
var rowData = rows[i];
if(!this.copy){
store.remove(rowData);//拖得时候.假如放的动作完成,完成从数组删除
}
store.insert(index,rowData);
}
},
notifyOut:function(dd,e,data){//当然这个界限范围也是在GridD这个组内!
alert("越界了");
}
});
});
分享到:
相关推荐
ExtJS的GridPanel导出excel文件,方便快捷易懂!
NULL 博文链接:https://aa00aa00.iteye.com/blog/564647
EXTJS.GRIDPANEL中日期格式 设置
主要介绍了ExtJs中gridpanel分组后组名排序实例代码,有需要的朋友可以参考一下
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
Extjs4.1 小例子(适合extjs初学者学习使用).直接导入myeclipse即可
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
Extjs2.02 Gridpanel加载本地数组资源的实例,思路相当清晰。对初学者很有用
一个关于GridPanel的使用例子 介绍了Proxy,JsonReader Store gridPanel等几个对象的简单使用
NULL 博文链接:https://topbox163.iteye.com/blog/1276463
此文件用于项目首页内容,使用了ExtJs中的GridPanel
刚学习了Ext的开发框架,发现这个东西还是挺不错的。 后来公司让改变一个Gridpanel的展现方式,要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久,也没有找到框架的相应控制方法,然后在网上找了很久...
...
...
NULL 博文链接:https://tonylian.iteye.com/blog/1735525
新手学习,初学extjs时用刚刚好,里边有三个例子,还有一个我自己写的例子(简单粗暴动态菜单),还有一个中文API
ExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义...
本文为大家详细介绍下ExtJs如何设置GridPanel表格文本垂直居中,具体实现代码及截图如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
使用extjs做的一个分割窗体的例子,入门型的,