0 0

Extjs如何调用自定义的panel和代码调用5

自己手写一页面的extjs,东拼西凑,刚刚把一个功能完成,居然就有2000代码了,可见垃圾代码不少,不知道怎么将一个js代码分到不同的js文件中,比如Viewport整体布局,上下左右中这5部分想分开写其区域代码 可以吗?如何实现?
另外,一个panel下面 我新建多个panel,我先自定义出去,就像函数调用一样,如何实现呢?谢谢解答!
2014年4月09日 20:55

1个答案 按时间排序 按投票排序

0 0

采纳的答案

当然得这么写…… 初学可以放在一起,真正做项目一定得分开。。你的思路非常正确


首先你必然有一个html页面(当然或许是jsp),在这个页面上当然是导入一堆js css文件吧,于是你分离开的js文件也在这里导入。

先说一种比较直白
比如你的 A.js里是你的viewport,你想把内部某一个panel写到B.js里,那么你在B.js里第一行直接开始var b_panel = new Ext.Panel({...}),创建出你的panel对象,然后在你的 A.js里,就直接可以用b_panel这个对象塞进viewport的items里。
注意:在html页面中导入js的顺序要正确,就是B.js要在 A.js前面加载。
原理就是:随着一排js的导入,每个js文件里new出的对象都会存放在内存中, 前面创建出的后面都可以用,所以B.js里创建的b_panel可以在 A.js里直接使用。
一个变种就是在B.js里的new代码外面包一层function,作为函数调用。然后你可以在任何需要的地方去调用这个function,这样你可以new出多个panel实例(当然,需要的话)。

当然更好的办法是将你要分离出去的panel,作为Ext.Panel的子类,用继承语法定义成一个类,这样你在需要使用的地方可以像new Ext.YourPanel({...})这样Ext风格创建出,比较正规。项目中必然会遇到一些可以复用的组件,形式相似的组件,这时候定义类的优势不言而喻。当然用定义function传参的形式也可以做到。

2014年4月10日 18:06

相关推荐

    Extjs自动最大化panel

    4. **自定义代码**:在某些情况下,可能需要编写自定义JavaScript代码来处理复杂的动态布局需求,例如在Panel初始化后或容器尺寸改变时手动调用`doLayout`方法来更新布局。 在提供的压缩包文件中,`TestAuoMaxPanel...

    Extjs 4.11 重写 Panel 添加 click事件

    这涉及到事件监听和处理机制,以及如何通过JavaScript代码重写Panel的行为。 首先,了解ExtJS中的事件系统至关重要。事件系统是ExtJS框架的核心部分,它允许组件之间进行通信。在ExtJS中,每个组件都有自己的事件,...

    Extjs 重写Panel添加click事件

    然而,有时我们需要对Panel进行自定义,例如添加或修改事件处理。在这个场景中,我们将深入探讨如何在Ext JS中重写Panel并为其添加click事件。 首先,理解Panel的基本结构是至关重要的。一个Panel由多个部分组成,...

    Extjs 自定义树结构实现以及动态表头实现

    4. **MVC模式**:在ExtJS中,推荐使用Model-View-Controller模式组织代码,控制器负责处理用户交互和业务逻辑,模型管理数据,视图负责显示。 通过以上步骤,你可以构建一个完整的应用,包含自定义树结构和动态表头...

    extJs中关于formPanel动态添加组件的验证问题

    在上述博客中,作者可能详细阐述了以上步骤,并可能分享了具体的代码示例,展示了如何在EXT JS环境中实现动态添加组件并确保它们的验证功能正常工作。通过这样的实践,开发者可以灵活地构建动态表单,同时保持数据的...

    extjs简单示例。带程序。

    同时,对于asp.net开发者,了解MVC模式和Web API的使用也是必不可少的,这将帮助他们更好地设计后端接口以供EXTJS调用。 总之,“extjs + asp.net简单示例”是一个演示如何结合两种技术创建一个功能完善的Web应用的...

    Extjs google map调用

    在提供的文件`an_GoogleMapControl`中,可能包含示例代码或自定义的控制组件,用于在ExtJS应用中更好地控制和操作Google Map,比如添加自定义控件、实现地图交互事件等。通过学习这个文件,你可以了解如何将这些功能...

    ExtJs使用自定义插件动态保存表头配置(隐藏或显示)

    总的来说,这个自定义插件提供了一种简单有效的方法,使得ExtJs的表格组件可以根据用户的操作动态保存和恢复表头的配置,提升了用户体验。通过结合复写组件和使用localStorage,我们可以在不与服务器交互的情况下...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    这通常涉及API调用和数据交换,ExtJS的AJAX和Promise机制对此提供支持。 通过以上知识点,我们可以看到,基于ExtJS的工作流设计器不仅可以提供美观的界面,还可以实现复杂的业务逻辑。这种设计器对于简化工作流配置...

    extjs3中引入地图

    在EXTJS3中,我们可以创建一个新的Panel或Window组件,并在其配置中添加自定义的HTML代码,这部分代码会加载百度地图的JavaScript API。例如: ```javascript var mapPanel = new Ext.Panel({ title: '百度地图', ...

    extjs Msgbox封装

    总结一下,"extjs Msgbox封装"是将ExtJS的MsgBox功能整合到一个自定义的命名空间(如`MyApp`)下,以提供更加便捷和模块化的使用方式。这通常包括对`Ext.MessageBox.show`方法的包装,以及可能添加的其他辅助方法,...

    extjs 源码

    2. `examples`: 代码示例,包括各种功能的示例代码和对应的HTML、JavaScript文件。 3. `resources`: 包含CSS样式文件、图片和其他资源,用于美化EXTJS组件。 4. `js`: EXTJS的核心库,包括基础组件、布局、数据管理...

    extjs4学习文档

    同时,创建一个helloworld.html文件,引入EXTJS的CSS和JavaScript库以及自定义的helloworld.js文件。正确设置文件引用路径后,通过浏览器访问http://localhost:8080/Ext4/helloworld.html,应能看到显示的Panel。 ...

    extjs4打印grid插件

    总的来说,"extjs4打印grid插件"是ExtJS4开发中非常实用的一个工具,它为Grid Panel提供了方便的打印功能,极大地丰富了用户体验,特别是在数据报告和数据分析场景中。通过深入理解和使用这个插件,开发者可以更好地...

    Extjs动态GRID

    EXTJS动态GRID是一种基于JavaScript的前端开发框架EXTJS中的组件,用于展示数据并提供交互功能。EXTDRID(可能是EXTGRID的拼写错误)是指EXTJS中的...在学习和使用EXTJS时,熟悉这些动态特性和API调用是至关重要的。

    ExtJS grid过滤操作

    在myapp4项目中,你可能会找到相关的代码示例,展示了如何在实际应用中配置和使用ExtJS Grid的过滤功能。通过阅读和理解这些代码,你可以更好地理解和应用上述理论知识。 总结来说,ExtJS Grid的过滤操作提供了...

    Extjs 3.0 中文API

    ExtJS 3.0 是一个基于JavaScript的开源框架,用于构建富客户端Web应用程序。这个框架提供了丰富的组件库、数据绑定机制、高级布局管理...在实际项目中,结合示例代码和API文档,可以更好地理解和应用ExtJS 3.0的功能。

    EXTJS 3[1].0 API中文文档

    8. **事件系统**:EXTJS 采用事件驱动的设计模式,组件间通过发布和订阅事件来实现通信,简化了代码结构和维护工作。 9. **Ext.Direct**:EXTJS 3.1.0 引入了Ext.Direct,这是一种直接与服务器进行远程调用的方法,...

    整理3种类型extjs

    EXTJS的窗口和面板(Window和Panel)也是重要的组成部分。例如,"相关事务"窗口(XgWorkWindow)和"关闭相关流程"(WorkFlow2)都是通过new关键字实例化Suncy类来创建的。这些窗口通常包含自定义的JS配置文件,如...

    用Extjs做的一个小项目,实现了增删改查

    - **Grid Panel**:在实现增删改查功能时,ExtJS的Grid Panel是核心组件,用于显示和编辑表格数据。它支持分页、排序、过滤和列宽调整等特性。 - **Form Panel**:用于创建和编辑记录,通常包含各种输入字段如...

Global site tag (gtag.js) - Google Analytics