首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在ExtJS 3.x中构建可拖动的字段集

在 ExtJS 3.x 中,要构建可拖动的字段集,您需要使用 Ext.grid.DragDrop 插件。以下是一个简单的示例,说明如何在 ExtJS 3.x 中实现可拖动的字段集:

  1. 首先,确保您已经包含了 ExtJS 3.x 的库文件。
  2. 创建一个 Ext.grid.GridPanel,并为其添加一个 Ext.grid.DragDrop 插件。
代码语言:javascript
复制
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: columns,
    viewConfig: {
        plugins: [
            new Ext.grid.DragDrop()
        ]
    }
});
  1. 在 Ext.grid.DragDrop 插件中,您可以设置一些选项,例如:
  • ddGroup:设置拖动和放置的组名称,以便您可以在多个组之间拖动和放置。
  • enableDrag:设置为 true 以启用拖动。
  • enableDrop:设置为 true 以启用放置。
  • copy:设置为 true 以在拖动时创建副本。

例如,要设置 ddGroup 和 enableDrag,您可以这样做:

代码语言:javascript
复制
new Ext.grid.DragDrop({
    ddGroup: 'my-group',
    enableDrag: true
})
  1. 最后,您需要将 GridPanel 添加到 Ext.Panel 或其他容器中,并显示它。
代码语言:javascript
复制
var panel = new Ext.Panel({
    renderTo: 'my-container',
    layout: 'fit',
    items: [grid]
});

现在,您已经创建了一个可拖动的字段集,可以在 ExtJS 3.x 中使用。

请注意,ExtJS 3.x 是一个较旧的版本,可能不再受到官方支持。如果可能的话,建议您升级到最新版本的 ExtJS,以获得更好的性能和安全性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

程序员Web面试之前端框架等知识

包含底层用户交互、动画、特效和更换主题可视控件。包含了许多维持状态小部件(Widget),因此,它与典型 jQuery 插件使用模式略有不同。...(2) jQuery UI则是在jQuery基础上,利用jQuery扩展性,设计插件。提供了一些常用界面元素,诸如对话框、拖动行为、改变大小行为等等。...ExtJS ExtJS 是最流行 JavaScript 框架之一,提供了非常丰富 UI 组件,包括高性能数据表格、图表、选项卡、弹窗、工具条和菜单等等整套 Web UI 组件,可以帮助你构建用户体验良好...Bootstrap一经推出便颇受欢迎,一直是GitHub上热门开源项目。Bootstrap为我们网站快速搭建提供了不错工具和思路,这个工具将拥有更旺盛生命力。...UI框架,Wijmo每个组件都拥有丰富功能、易使用、极佳性能。

2.2K50

TypeScript 强类型 JavaScript – Rafy Web 框架选型

一是因为我要做是 SinglePageApplication Web 界面框架,而 ExtJs 4 带了大量界面控件,非常方便使用;其次,ExtJs 4 提供了客户端实体模型,这可以与 Rafy...虽说 prototype.js 等其它框架也或多或少地支持了部分面向对象设计,但是 ExtJs4 类型系统,无疑是支持得最全面的:命名空间、封装、继承、接口、静态、单例、类型引用管理。...所以,Rafy.js 最终是基于 ExtJs4 来构建。 下面是当时 Rafy.js 开发完成后框架类截图: ? ? 注意到,为了更好地解决开发过程上述问题。...该文档内容其实还是约定了一些封装、继承、多态编写约定(ExtJS 给出面向对象类型系统同样不完美)、以及一些代码规范。...《为何TypeScript是任何事情答案?》 《Type入门(JavaScript)-译》

2.2K60

Ext整体印象

我想在这样应用广度下Ext应该是一个值得信赖,不会有 ExtJS是一个你可以信赖用于构建富客户端应用跨浏览器脚本框架类库。...ExtGWT也是为了构建RIA而出一个基于GWTJava库,其实.net包装也有(但不成熟)。...ExtJS包括 高性能自定义UI组件 设计良好扩展组件模型 直观而且易用API 商业与开源双重许可证 商业许可证也分多种级别(银-金-铂金-砖石) 开源许可证 2008...(VS2008智能感知对脚本支持) 在线支持支持我们根据需要构建自己版本 http://extjs.com/products/extjs/build/ 从Ext文件结构远眺Ext山脉走向...整体 源代码 实际体验如何把Ext基本Demo整合到我们应用来 ExtGUI Designer,提供可视化设计工具,生成界面的对象json表达,嵌入到应用,对于新手入门很方便

1.6K70

ExtJs+WCF+LINQ实现分页Grid

上篇文章《用ExtJs+Linq+Wcf打造简单grid 》,这个网格控件不带分页,本文在上文基础上添加分页功能,文中会着重介绍如何在用LINQ返回分页数据,如何使ExtJs与WCF进行Restful...交互,如何在页面添加一个带有分页功能ExtJSGrid控件。...第一步:在vs2008创建一个支持.Net Framework 3.5,名称为:ExtJs_Wcf_Linq_PageGridAsp.Net网站, ?...第三步:在本文示例,我们使用SQL2005自带示例数据库AdventureWorks数据表Product,默认情况下该示例数据库可能未安装,要安装此数据库,可以查阅SQL2005文档与教程...、 拖动成功之后,便有vs2008IDE自动生成了有关Product实体类和linq操作数据表Product操作类:ProductsDataContext,在可视化界面也能有如下显示: ?

1.9K70

AI键盘侠来了:DeepMind开始训练智能体像人一样「玩」电脑

通过重新审视模仿与强化学习简单扩展组合,研究者发现实现高性能主要缺失因素仅是用于行为克隆的人类轨迹数据大小。...随着人类数据增加,性能会可靠地提升,使用数据大小是以往研究 400 倍。...最后,MiniWob++ 任务需要单击或拖动操作,而这些操作无法通过基于 DOM 元素操作来实现(参见图 1b 示例)。...与之前 MiniWob++ 研究一样,DeepMind 智能体可以访问由环境提供文本字符串字典,该字典被输入到给定任务输入字段(参见附录图 9 示例)。 ...最初 MiniWob++ 任务套件提供了一个基于 Selenium 接口。DeepMind 决定实现一个替代环境堆栈,旨在支持智能体可以在 web 浏览器实现各种任务。

33320

进击大数据系列(一):Hadoop 基本概念与生态介绍

Hadoop 3.x - 改进时间线服务v2并提高时间线服务扩展性和可靠性。 默认端口范围 Hadoop 2.x - 在Hadoop 2.0,一些默认端口是Linux临时端口范围。...Hadoop 3.x - Hadoop 3.x还有多个名称空间用于多个名称空间。 扩展性 Hadoop 2.x - 我们可以扩展到每个群集10,000个节点。...Hadoop 3.x - 更好扩展性。我们可以为每个群集扩展超过10,000个节点。 访问数据 Hadoop 2.x - 由于数据节点缓存,我们可以快速访问数据。...高容错性:数据自动保存多个副本,某一个副本丢失之后,可以自动恢复 适合处理大数据: 构建在廉价机器上:通过多副本机制,提高可靠性 缺点 不适合低延时数据访问:毫秒级存储数据 无法高效对大量小文件进行存储...(默认是default)、表拥有者、列 / 分区字段、表类型(是否是外部表)、表数据所在目录等;默认存储在自带 derby 数据库,推荐使用 MySQL 存储 Metastore Hadoop

1.7K31

Maven私服Nexus搭建

私服存在合理性 Maven依赖是从服务器仓库中下载,Maven仓库只有两大类: 1) 本地仓库 2) 远程仓库,其中在远程仓库又分成了3种:中央仓库 、私服、其它公共库。...构建Maven私服使用Nexus,Nexus是一个强大Maven仓库管理器,它极大地简化了自己内部仓库维护和外部仓库访问。...Nexus 使用ExtJS来开发界面,利用Restlet来提供完整REST APIs,通过m2eclipse与Eclipse集成使用。Nexus支持WebDAV与LDAP安全身份认证。...构建Nexus 说完了私服好处,你是不是已经等不及开始构建maven私服了,那么我们开始一起构建我们私服。...Apache Snapshots:Apache专用快照仓库(3.x去除了) 配置mavensetting.xml(本地全局配置) 在mavensetting.xml文件配置私服配置,这种方式配置后所有本地使用该配置

1.6K50

mongoDB简介及关键特性

对于接触或使用过关系型数据库亲们,文档就相当于表一条记录。...MongoDB 文档可以设置为使用不同字段,并且相同字段可以使用不同同数据类型 文档值不仅可以是在双引号里面的字符串,还可以是其他几种数据类型(甚至可以是整个嵌入文档...+索引,全文索引,地理空间索引 C++实现 支持复制和故障恢复 可以通过配置复制方式实现节点间复制以及故障转移 基于复制读写分离以分散...IO,提高性能 支持分片 可以基于片键实现分片,即将数据分散在不同节点 支持分片自动均衡以及手动均衡 可以结合复制构建强大分布式集群...易伸缩,支持水平数据库集群,动态添加额外服务器 支持多平台 Windows,Linux,Mac OS-X,FreeBSD,Solaris 多语言驱动

1.7K10

ExtJs二(实现登录)

如果想要在脚本中使用ExtJS提示信息,可将书附带资源包Ext.js文件复制到ExtJS目录,复制后,在解决方案资源管理器将Ext.js拖到到login.js文件,就会生成以下代码:  //...一般登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证码图片、登录和重置按钮。因而需要用到ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...,标签宽度为80,标签分隔符为中文冒号,锚固为0,都不允许为空等,代码如下: defaultType: "textfield", fieldDefaults: { labelWidth: 80...,因而余下就只有字段标签和名称。...{ me.form.items.items[0].focus(true, 10); } me.onRefrehImage(); } 代码要注意是获取表单第一个文本字段代码

2K10

OEA WPF 树型表格整体重构

和 OEA 元数据系统耦合,希望独立为单独控件程序,提高复用性。 不支持 xaml 声明格式。原控件直接在后台用 OEA 代码生成,本质上作为一个 WinForm 控件来用。...还是 B/S 好啊,ExtJS 中就有很强大 TreeGrid,十分省事。) 随着对 WPF 技术了解得更深入,希望做一个完全独立 WPF 控件。(用了那么久 WPF,想留下点东西。...元素逻辑行为与渲染是分离:     在元素发生诸如点击、拖动、选择等逻辑行为时,其实只变更了它内部状态数据。...通过添加一些 bool 类型防止重入字段,Measure 可以做所有逻辑操作之后、渲染之前控件构造、刷新、替换、状态变更,并对最终确定可视树子元素进行测量。: if(this....而经常做这些空性检测原因是,WPF 控件设计要求,各控件互相之间没有必然联系。控件设计者不会知道该控件会被上层开发人员把它放在哪个控件里。

1.8K60

PBI可视化神器 Charticulator 入门教程

效果如下图所示,这些丰富、媲美Tableau可视化图表,无疑是对Power BI可视化极大加强和补充。 如何在 Power BI 中集成 Charticulator?...图标,下面是配置图表步骤: 步骤 1:将数据添加到可视化 与我们在 Power BI Desktop 创建任何其他图表一样,第一件事是拖动我们想要在图表显示或使用字段: 在这种情况下,我们想用...我们添加了类别字段以按颜色区分不同产品类别。...一旦我们点击“创建图表”,我们将看到Charticulator网页设计屏幕: 数据面板:我们在 Power BI 中指示列或数据列表。 工具栏:用于设计图表工具。...我们使用旁边圆形箭头旋转垂直文本,将 size 属性更改为 6 并将“Item”字段拖动到“Text”属性: 创建报表后,不要忘记按左上角“保存”按钮,然后按“返回报表”以查看我们 Power

4.7K21

无需Visual Studio,5容易 – 分为报告

通过点击报表设计器Detail区域数据库图标 打开例如以下数据源视图: 配置完数据源后。选择DataSource1。右键加入数据,即通过一条SQL语句。...则可获得一个DataTable相似的数据对象。 本博客使用完整SQL例如以下。数据源可通过这个路径下载 (下载附件后。解压文件。...依次从数据字段,往报表上拖动字段供应商名称、联系人、地址、城市等 对于Line、BarCode和Picture,则须要从左側工具栏拖入。...当中BarCode和Picture须要在属性对话框改动数据—DataField字段。 第5分钟:预览结果、打印、导出 预览查看报表结果效果例如以下 导出:在设计工具。...,加入公司logo等个性化需求。

1.8K00

OpenCV各版本差异与演化,从1.x到4.0

: 新版本产生是为了顺应当下需要,通过版本更新,接纳新技术和新方法,支持新兴编程语言接口,使用新指令,优化性能,解决固有问题等 新技术新方法会优先加入到新大版本,即使新技术方法可以在旧版本实现...2009年9月2.0 beta发布,主要使用CMake构建,加入了很多新特征、描述子等,FAST、LBP等。 2010年4月2.1版本,加入了Grabcut等,可以使用SSE/SSE2…指令。...OpenCV 3.x 随着3.x发布,1.xC API将被淘汰不再被支持,以后C API可能通过C++源代码自动生成。...3.x与2.x不完全兼容,与2.x相比,主要不同之处在于OpenCV 3.x 大部分方法都使用了OpenCL加速。...本文仅对OpenCV演化过程仅总结了部分要点,详细参见 OpenCV 在 github上ChangeLog。

3.2K40

ExtJs二(实现登录)

如果想要在脚本中使用ExtJS提示信息,可将书附带资源包Ext.js文件复制到ExtJS目录,复制后,在解决方案资源管理器将Ext.js拖到到login.js文件,就会生成以下代码:  //...一般登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证码图片、登录和重置按钮。因而需要用到ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...,标签宽度为80,标签分隔符为中文冒号,锚固为0,都不允许为空等,代码如下: defaultType: "textfield", fieldDefaults: { labelWidth: 80...,因而余下就只有字段标签和名称。...{ me.form.items.items[0].focus(true, 10); } me.onRefrehImage(); } 代码要注意是获取表单第一个文本字段代码

1.8K20

VueExtJS+SpringBoot打造双版本通讯录管理系统

第二个模块就是权限管理模块,这个模块管理了管理员 和 用户分别有哪些菜单权限,Vue 版本对齐进行了深入优化,角色自由定义增删。...第四个模块是管理类型管理模块,也就是通讯录类型,朋友、同学、家人等,支持增删改查导出操作,如下图所示。 当然朋友类型添加界面也要展示一下,如下图所示。...点击每一个常用模块可以快速进入对应模块,不用再依次选菜单了。 朋友类型模块如下所示,你可以在这个模块维护朋友类型数据,朋友类型数据要在通讯录明细模块引用。...作者拥有本软件构建应用系统全部内容所有权及独立知识产权。 如有问题,欢迎在仓库 Issue 留言,看到后会第一时间回复。相关意见会酌情考虑,但没有一定被采纳承诺或保证。...利用本软件构建网站任何信息内容以及导致任何版权纠纷和法律争议及后果和作者无关,作者对此不承担任何责任。

30810

Github 项目推荐 | 真实全景图像强化学习 AI 平台 —— Matterport3DSimulator

特征 数据由 90 个不同室内环境组成(包括住宅、办公室、酒店、教堂) 所有的图像都是真实,不是合成(提供更多视觉复杂度) 用于 C++ 和 Python API 定制图像分辨率、相机参数等...C++ 编译器是必要,另外,Matterport3DSimulator 有以下依赖关系: OpenCV >= 2.4 including 3.x OpenGL OSMesa GLM Numpy pybind11...下载数据 要使用 Matterport3DSimulator,必须先下载 Matterport3D 数据(https://niessner.github.io/Matterport/),或者下载预先计算...build cmake -DOSMESA_RENDERING=ON .. make cd ../ 要为doxygen目录 C ++ 类构建 html 文档,请运行以下命令并导航到 doxygen.../ html / index.html: doxygen Demo 这些是非常简单 Demo 演示,旨在说明模拟器如何在 Python 和 C++ 中使用 Python demo: python src

1.9K120

AI键盘侠来了:DeepMind开始训练智能体像人一样「玩」电脑

通过重新审视模仿与强化学习简单扩展组合,研究者发现实现高性能主要缺失因素仅是用于行为克隆的人类轨迹数据大小。...随着人类数据增加,性能会可靠地提升,使用数据大小是以往研究 400 倍。...最后,MiniWob++ 任务需要单击或拖动操作,而这些操作无法通过基于 DOM 元素操作来实现(参见图 1b 示例)。...与之前 MiniWob++ 研究一样,DeepMind 智能体可以访问由环境提供文本字符串字典,该字典被输入到给定任务输入字段(参见附录图 9 示例)。 ...最初 MiniWob++ 任务套件提供了一个基于 Selenium 接口。DeepMind 决定实现一个替代环境堆栈,旨在支持智能体可以在 web 浏览器实现各种任务。

52630

Ext JS 教程-开始使用 ExtJS 4

应用程序结构 2.1 基本结构 如下所列建议尽管不是强制,但是可以作为最佳实践指南考虑,以保持你应用结构条理性、扩展性和可维护性。...这对于缩短你学习曲线很有帮助,然而实际应用开发 ext-debug.js 大多情况下是首选。...取而代之做法是为你生产环境创建一个定制构建,这在第3节描述到了。 3....JSB3生成给我们在构建之前变更 app.jsp3 机会——这在当你需要复制定制资源是可能有帮助,但在大多数情况下我们可以使用第二条命令执行构建: sencha build -p...你可能希望在你构建过程或者服务器端逻辑决定这个东西,但是现在先只在 helloext文件夹里面创建一个称作 index-prod.html 新文件: <html></p

6.3K40
领券