Ext.onReady(
function() {
new Ext.Panel(
{
renderTo:hello,
width:400,
height:300,
title:"我是Panel",
html:"",
autoScroll:true,
collapsible:true,
tbar:[{text:"顶部按钮1",handler:function(){ Ext.MessageBox.alert("点击","顶部按钮1被点击")}{text:"顶部按钮2"}],
bbar:[{text:"底部按钮1"},{text:"底部按钮2"}],
draggable:{
insertProxy:false,
onDrag:function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
s.hide();
},
endDrag:function(e) {
this.panel.setPosition(this.x,this.y);
}
},
x:100,
y:100,
floating:true
}
);
}
);
分享到:
相关推荐
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
在IT领域,拖拽功能是用户界面中常见的一种交互方式,尤其在数据可视化和管理工具中,例如ExtJS的树形组件(Tree)。本项目主要关注如何在完成拖拽操作后,更新并保存树节点的新顺序。ExtJS是一个强大的JavaScript库...
首先,需要拖拽一个Tree Panel到“west”占位符中,以便在主界面中显示导航菜单。 2. 建立“导航模型”:在Extjs中,我们需要建立一个模型来描述导航菜单的结构。在这里,我们建立了一个名为GNLBModel的模型,该...
在ExtJS 4中实现两个GridPanel间的数据拖拽功能涉及到了ExtJS框架提供的丰富的组件和插件支持。拖拽功能让用户可以通过交互式地拖动界面元素来执行操作,如移动或复制数据项等。这里的主要知识点是使用ExtJS提供的...
例如,ExtJS提供的窗口(window)组件可以创建模态窗口和非模态窗口,对话框(dialog)组件则用于创建可拖拽和自定义大小的对话框。通过这些组件,可以非常方便地构建出功能丰富且具有良好用户体验的Web界面。 总之...
EXTJS的核心特性包括可拖拽布局、数据绑定、强大的表格和树形视图、以及高度自定义的图表。 在"EXT JS"这一标签下,我们关注的是EXTJS框架的使用和学习。EXTJS 4.1.4是该框架的一个稳定版本,提供了大量的改进和新...
在EXTJS教材和教程中,初学者会接触到EXTJS的核心组件之一——Grid Panel,这是一个功能强大的数据展示和操作工具。以下是对EXTJS Grid Panel的详细知识点解析: 1. **EXTJS Grid Panel的功能特性** - **丰富的...
1. **ExtJS Grid Panel**: 这是ExtJS中的一个核心组件,用于展示数据表格。用户可能通过Grid Panel查看查询结果,并进行排序、过滤和分页。 2. **Data Store**: ExtJS的数据存储机制,用于缓存和管理服务器端获取的...
ExtJS中的Panel组件可以作为窗口的基础,通过监听和处理鼠标事件来实现这些行为。 3. **开始菜单和快捷方式**:开始菜单通常包含程序启动项、设置选项等。这可以通过创建自定义的ExtJS菜单和按钮来实现,每个菜单项...
5. **拖放功能**:EXTJS 提供了完整的拖放支持,使得用户可以轻松创建可拖动和可放置的元素,提升应用的交互性。 6. **可访问性**:EXTJS 遵循WCAG 2.0标准,提供了一套辅助功能,使有特殊需求的用户也能正常使用...
5. 自定义内容:对话框内部可以包含各种Extjs组件,如`Ext.form.Panel`用于创建表单,`Ext.grid.Panel`用于显示数据网格等。例如: ```javascript items: [{ xtype: 'form', items: [{ xtype: 'textfield', ...
它提供了一整套组件化的用户界面元素,包括Panel、Window、Tree、Grid、Form和Store等,这些都是ExtJS的核心组件。本文将详细讲解这些知识点,帮助无论是初学者还是有一定基础的学习者提升在ExtJS开发中的技能。 ...
6. **Window(窗口)**: Window组件可以用来弹出浮动的对话框,支持拖动、最大化、最小化和关闭操作。 7. **Toolbar(工具栏)**: Toolbars通常位于Panel的顶部或底部,用于放置按钮、菜单、分割线等元素。 8. **...
在设计过程中,EXTJS的图表组件如Ext.chart系列可以用来展示工作流状态和进度,而EXTJS的树形组件(Ext.tree.Panel)则适合用来表示流程的层次结构。例如,"zTreeStandard.gif"和"zTreeStandard.png"可能就是用于...
EXTJS可以很好地实现这样的效果,通过其组件化的特性,可以构建出模仿桌面操作系统的界面,如任务栏、开始菜单、窗口拖拽等。 在EXTJS2.0中,开发者可以利用其强大的布局管理器,如fit布局、border布局等,来创建...
在ExtJS中,树形结构是通过`Ext.tree.Panel`或`Ext.tree.View`来实现的,它们提供了丰富的配置选项和事件处理。 1. **创建树结构**:在ExtJS中,树的数据源通常是一个JSON对象或Store,其中包含了节点的信息,如ID...
- `draggable`:如果设置为`true`,Panel可以被拖动,默认为`false`。 - `html`:Panel的主体内容。 - `id`:Panel的唯一标识符,方便通过ID访问Panel对象。 - `width`/`height`:Panel的宽度和高度。 - `title...
- 将容器转换为Panel,设置`xtype`为`panel`。 4. **左侧导航占位符**:对于大多数企业级应用而言,左侧通常会有一个固定的导航栏。 - **Region**:设置为`west`,表示位于Viewport的左侧。 - **StateId**:设置...
"视图"(View)则是用户看到的界面,由各种ExtJS组件构成,如面板(Panel)、窗口(Window)等;"控制器"(Controller)则用来协调模型和视图之间的交互,实现功能逻辑。 "webdesktop1.0"可能包含了以下关键部分: ...