`

Ext.Panel() 拖动效果

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Panel拖动</title>
		<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
		<!-- ** Javascript ** -->
		 <!-- ExtJS library: base/adapter -->
		<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
		<!-- ExtJS library: all widgets -->
		<script type="text/javascript" src="ext/ext-all.js"></script>
		<script type="text/javascript" src="panelDraggle.js"></script>
	</head>
	<body>
	</body>
</html>

 panelDraggle.js

 Ext.onReady(function(){
  
  var myPanel = new Ext.Panel({
   renderTo:Ext.getBody(),
   title:'可拖动Panel',
   x:100,y:100,
   width:500,height:150,
   floating:true,
   //圆角
   frame:true,
   //拖动
   draggable:{
    //拖动时不虚线显示原始位置
    insertProxy:false,
    onDrag:function(e){
     var pel = this.proxy.getEl();
     this.x = pel.getLeft(true);
     this.y = pel.getTop(true);//获取拖动时panel的坐标
     
     var s = this.panel.getEI().shadow;
     if(s){
      s.realign(this.x,this.y,pel.getWidth(),pel.getHeight());
     }
    },
    endDrag:function(e){
     this.panel.setPosition(this.x,this.y);
    }
   },
   tools:[
    {id:'close'},
    {id:'minimize'},
    {id:'maximize'},
    {id:'restore'},
    {id:'gear'},
    {id:'pin'},
    {id:'unpin'},
    {id:'right'},
    {id:'left'},
    {id:'up'},
    {id:'down'},
    {id:'refresh'},
    {id:'minus'},
    {id:'plus'},
    {id:'help'},
    {id:'search'},
    {id:'save'},
    {id:'print'}
    
   ],
   html:"从左右到依次为:<br />" +
     "close,minimize,maximize,restore,gear,pin,unpin,right,left,up,down,<br />" +
     "<div style='float:right'>refresh,minus,plus,help,search,save,pring</div>"
  });
 });

 

 

0
0
分享到:
评论

相关推荐

    完成Ext 拖拽树后对新的树节点顺序进行保存

    2. **确定新位置**:在`beforedrop`事件中,获取当前拖动节点和目标位置节点的信息,计算出新的节点顺序。 3. **更新数据源**:在`drop`事件中,根据新的位置信息,更新树数据源。这可能涉及在树数据模型中移动节点...

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有...

    Ext.net实现GridPanel拖动行、上移下移排序功能DEMO

    对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...

    Ext Js权威指南(.zip.001

    8.3.6 为组件提供拖动功能:ext.util.componentdragger / 421 8.3.7 为组件实现动画功能:ext.util.animate / 422 8.3.8 其他的组件辅助功能类 / 423 8.4 组件的管理 / 423 8.4.1 组件管理及查询:ext....

    EXT 控件拖动例子

    在这个"EXT 控件拖动例子"中,我们将深入探讨EXTJS如何实现控件的拖放功能,以及如何在动态布局中运用这一特性。 EXTJS 提供了一个名为`Ext.dd.DragDrop`的接口,它使得在界面上的元素可以被拖动和放置。这个接口...

    treePanel到panel的拖拽 等等操作详细,及步骤

    本文详细介绍了如何使用Ext JS框架实现从TreePanel到Panel的拖拽功能。通过深入分析代码示例,我们了解了整个实现过程的关键步骤。这种交互方式不仅能够提高用户界面的友好度,还能够使应用更加灵活多变,满足不同...

    基于ext的div拖动

    "基于EXT的div拖动"是指利用EXTJS这一强大的JavaScript框架来实现这种功能。EXTJS是一个用于构建富客户端Web应用的前端框架,它提供了丰富的组件库、数据绑定机制以及强大的布局管理,使得开发者可以方便地创建出...

    Ext实现的拖拽树的测试例子

    var tree = Ext.create('Ext.tree.Panel', { store: treeStore, // 用于存储树节点的数据 rootVisible: false, // 是否显示根节点 ... }); ``` - 配置拖拽:通过`dragDropConfig`属性,我们可以启用拖放行为...

    ExtJs_xtype一览

    - `panel`:`Ext.Panel`,提供标题、边框、工具栏等功能的容器。 - `tabpanel`:`Ext.TabPanel`,分页容器,每个页签代表一个单独的面板。 - `treepanel`:`Ext.tree.TreePanel`,显示树形结构的数据。 - `flash...

    Ext中拖拽Tree2Grid , 清空表格拖拽失效的解决办法>.<

    var tree = Ext.create('Ext.tree.Panel', { ... viewConfig: { enableDD: true }, ddGroup: 'myDDGroup' }); ``` 2. **配置Grid接收拖放**:在Grid的配置中,我们需要设置`enableDrop`为`true`,同样定义`...

    Extjs帮助文档.pdf

    接下来将详细介绍文档中提到的几个核心概念,包括`Ext.MessageBox`、`Ext.Panel`、`Ext.Window`、`Ext.FormPanel`、`Ext.TabPanel`、`Ext.XTemplate`和`Ext.TreePanel`以及如何在Extjs中实现主题(换肤)功能。...

    ext三列拖动

    "ext三列拖动"是一个基于ExtJS框架实现的功能,主要涉及的是数据表格(Grid)中的列拖动功能。ExtJS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,它提供了丰富的组件和API,使得开发人员可以方便...

    [深入浅出Ext.JS.徐会生&何启伟&康爱媛)第7——13章.pdf

    根据提供的文件信息,“[深入浅出Ext.JS.徐会生&何启伟&康爱媛)第7——13章.pdf”,我们可以推测这是一本关于Ext JS框架的专业书籍的一部分,作者为徐会生、何启伟和康爱媛。由于实际的内容并未给出具体章节的信息,...

    Ext4详细解读

    3. **适用范围**:Accordion布局主要应用于`Ext.Panels`以及所有`Ext.panel.Panel`子项中。 **配置参数详解:** - `title`: 面板的标题。 - `layout`: 指定为`'accordion'`来使用Accordion布局。 - `width`/`...

    Ext4.0学习总结及功能详解(特别详细)

    Ext.create('Ext.panel.Panel', { title: 'Accordion Layout', width: 300, height: 300, x: 20, y: 20, layout: 'accordion', defaults: { bodyStyle: 'padding:15px' }, layoutConfig: { ...

    Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2

    例如,`Ext.Panel`是框架中的一个核心组件,用于创建带有标题、边框和可选项卡的容器。`Ext.grid.GridPanel`则是一个数据展示组件,常用于表格数据的展示和操作。每个类都详细说明了其构造函数、配置选项、事件处理...

    Ext4.1.0 API 中文版

    本资源为ExtJS4.1中文版API,是学习ExtJS4的得力助手,资源中用中文详细介绍各... Panel可以方便的被拖拽到任何容器Container或者布局中,并且布局和渲染的过程是完全由框架进行管理的 通过框架完全管理。 …………

    一些关于EXT空间的 案例

    在这个"一些关于EXT空间的案例"中,我们将探讨EXT在实现可编辑表格和可拖动表格等交互功能上的应用。 EXT的核心是其组件模型,它包括了各种各样的UI组件,如表格(Grid)、面板(Panel)、窗口(Window)等。在EXT...

    Ext学习文档(介绍 Core Util DD Widgets并有例子)

    `Ext.grid.Panel`则用于展示数据网格,可以自定义列、排序、过滤等功能。 在`Ext的学习文档.doc`中,你将会找到关于这些概念的深入解释和实际的代码示例。通过学习和实践,你将能熟练掌握如何利用Ext构建复杂、高...

Global site tag (gtag.js) - Google Analytics