`
king_tt
  • 浏览: 2279372 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

EXT之window动态加载页面

 
阅读更多

首先看下普通的窗口：

Js代码复制代码
  1. function<wbr>newWin()<wbr>{<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>var<wbr>win=</wbr>new<wbr>Ext.Window({title:</wbr>"窗口",<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>width:400,<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>height:300,<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>maximizable:</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>true});<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>win.show();<wbr>}<wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr>这样就是一个简单的窗口，里面不含任务内容。可以让它请求一个页面：</wbr>

Js代码复制代码
  1. var<wbr>win; <wbr><wbr></wbr></wbr></wbr>
  2. function<wbr>newWin(value)<wbr>{ <wbr><wbr></wbr></wbr></wbr></wbr>
  3. <wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr>//<wbr>如果窗口存在，显示</wbr><wbr><wbr></wbr></wbr>
  4. <wbr><wbr><wbr><wbr>win<wbr>=<wbr>Ext.getCmp(</wbr></wbr></wbr></wbr></wbr></wbr>"win"); <wbr><wbr></wbr></wbr>
  5. <wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr>if<wbr>(win)<wbr>{ <wbr><wbr></wbr></wbr></wbr></wbr>
  6. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>win.show(); <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  7. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>win.load({ <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  8. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>url<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>"../TeacherDispatchAction.do?method=courseDetail", <wbr><wbr></wbr></wbr>
  9. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>params<wbr>:<wbr>{ <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  10. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>couId<wbr>:<wbr>value, <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  11. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>subMainId<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>"tab-"<wbr>+<wbr>value<wbr>+<wbr></wbr></wbr></wbr></wbr>"-main"<wbr><wbr></wbr></wbr>
  12. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>} <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  13. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>}); <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  14. <wbr><wbr><wbr><wbr>}<wbr></wbr></wbr></wbr></wbr></wbr>else<wbr>{ <wbr><wbr></wbr></wbr></wbr>
  15. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>win<wbr>=<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>new<wbr>Ext.Window({ <wbr><wbr></wbr></wbr></wbr>
  16. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>title<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>"课程信息", <wbr><wbr></wbr></wbr>
  17. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>id<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>'win', <wbr><wbr></wbr></wbr>
  18. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>width<wbr>:<wbr>400, <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  19. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>height<wbr>:<wbr>300, <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  20. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>maximizable<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>true, <wbr><wbr></wbr></wbr>
  21. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>closable<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>true, <wbr><wbr></wbr></wbr>
  22. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>closeAction<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>'close'<wbr><wbr></wbr></wbr>
  23. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>}); <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  24. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>win.show(); <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  25. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>win.load({ <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  26. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>url<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>"../TeacherDispatchAction.do?method=courseDetail", <wbr><wbr></wbr></wbr>
  27. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>params<wbr>:<wbr>{ <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  28. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>couId<wbr>:<wbr>value, <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  29. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>subMainId<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>"tab-"<wbr>+<wbr>value<wbr>+<wbr></wbr></wbr></wbr></wbr>"-main"<wbr><wbr></wbr></wbr>
  30. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>}, <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  31. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>scripts:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>true<wbr><wbr></wbr></wbr>
  32. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>}); <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  33. <wbr><wbr><wbr><wbr>} <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  34. }<wbr><wbr></wbr></wbr>

<wbr></wbr>

这里的条件语句是用来作判断，我所实现的是只打开一个窗口，根据要求动态加载页面的内容。

Js代码复制代码
  1. win.load({ <wbr><wbr></wbr></wbr>
  2. <wbr><wbr><wbr><wbr><wbr>url<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>"../TeacherDispatchAction.do?method=courseDetail", <wbr><wbr></wbr></wbr>
  3. <wbr><wbr><wbr><wbr><wbr>params<wbr>:<wbr>{ <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  4. <wbr><wbr><wbr><wbr><wbr><wbr>couId<wbr>:<wbr>value, <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  5. <wbr><wbr><wbr><wbr><wbr><wbr>subMainId<wbr>:<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>"tab-"<wbr>+<wbr>value<wbr>+<wbr></wbr></wbr></wbr></wbr>"-main"<wbr><wbr></wbr></wbr>
  6. <wbr><wbr><wbr><wbr><wbr>}, <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  7. <wbr><wbr><wbr><wbr><wbr>scripts:<wbr></wbr></wbr></wbr></wbr></wbr></wbr>true<wbr><wbr></wbr></wbr>
  8. <wbr><wbr><wbr><wbr>});<wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr>

这句就是用来实现加载的语句。注意：如果请求的页面里也包含EXT组件的话，scripts: true不能丢掉。否则就不会显示啦。

Ext.Window的属性有：

closable : true,<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>//是否可关闭</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

closeAction : 'close'<wbr>关闭窗口是销毁窗口，为'hide'则隐藏</wbr>

maximizable : true,<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>//是否可最大化<br> draggable:false,//拖动<br><wbr>resizable:false //变大小</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

分享到：
| 在ExtJS里插入HTML元素
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    一个简单的Ext.Window中插入图片的例子

    在Ext JS这个强大的JavaScript框架中，`Ext.Window`是一个常用组件，用于创建浮动、可弹出的窗口。在Web应用程序中，我们常常需要在这些窗口中展示各种内容，包括文字、表格、按钮，当然还有图片。本文将详细介绍...

    Ext window的使用

    - **动态加载内容**：利用Ajax从服务器获取数据并在窗口中显示。 8. **最佳实践** - 避免过多的窗口实例，合理复用窗口以提高性能。 - 使用模态窗口时，注意避免阻塞用户操作，确保用户体验良好。 - 考虑窗口的...

    EXT样式的页面原型

    4. 页面组件：EXT框架包含多种预定义的UI组件，如Grid（表格）、Panel（面板）、Window（窗口）、Form（表单）、Button（按钮）、Toolbar（工具栏）等。这些组件都具有丰富的属性和方法，可以方便地定制外观和行为，...

    ext4.0改变 比较完整的介绍

    6. **动态类加载**：引入了`Ext.Loader`类，允许程序在运行时动态加载所需的JS文件。通过`setPath`和`require`等方法，可以按需加载，降低了初始页面的加载时间，提高了用户体验。 7. **自动类加载配置**：要启用...

    Ext学习笔记

    通过动态加载，可以只加载必要的组件脚本，而不是在页面加载时加载整个框架的`ext-all.js`文件。这可以显著减少页面加载时间，特别是对于那些只使用了ExtJS框架一部分功能的页面。 #### 3. 创建ExtJS4窗口（Window...

    ext.net 动态创建gridpanel

    在这个场景中，我们将深入探讨如何使用Ext.NET代码动态创建GridPanel，并在各种窗口中灵活展示。 1. **动态创建GridPanel**： 在Ext.NET中，动态创建GridPanel意味着在运行时根据需要生成组件。这通常涉及到在...

    界面 ext 4.1 mvc框架 动态加载控制层 后台session 过期处理

    在EXTJS 4.1 MVC框架中，动态加载控制层是一种优化应用性能和提升用户体验的常见做法。控制层（Controllers）负责处理用户交互和管理视图（Views）与模型（Models）之间的通信。动态加载控制层意味着只有在需要时才...

    EXT弹出框改装实现

    首先，EXT的Window组件是一个浮动的容器，可以作为独立的窗口在页面上显示。它继承自EXT的Panel组件，因此拥有Panel的所有特性，如布局管理、工具栏、标题等。要创建一个基本的EXT窗口，我们需要定义一个配置对象，...

    ext实例 ext操作步骤

    **页面布局**是EXT的核心功能之一，它提供了多种布局模式来适应不同设计需求。常见的布局有： 1. **Accordion布局**：这种布局方式使得每个子组件可以折叠，适用于展示大量同类信息但有限的空间。布局由`Ext.layout...

    Ext JS动态加载JavaScript创建窗体的方法

    动态加载JavaScript在Ext JS中主要通过`Ext.loader`对象实现，这个对象允许我们在运行时加载所需的类和资源，而无需在页面初始化时一次性加载所有代码。 1. **项目结构**： - 在一个典型的Ext JS应用中，项目通常...

    EXT例子，可以直接跑

    4. 动态加载和异步通信：EXT利用AJAX技术实现页面的动态加载和与服务器的异步通信，这在办公系统中至关重要，因为通常需要实时更新数据或者根据用户操作获取新的信息。`Ext.Ajax`或`Store`的远程代理可以实现这一...

    Ext grid panel 滚动条位置不变

    为了确保每次加载数据时滚动条都能正确地回到原来的位置，我们还可以通过覆盖`Ext.grid.GridView`中的方法来进一步增强功能： ```javascript Ext.override(Ext.grid.GridView, { scrollTop: function () { this....

    基于EXT2.0.2表格间数据拖拽

    DataStore通常与XML或者JSON数据源连接，可以动态加载和更新数据。在Grid中，我们可以通过配置ColumnModel来定义显示的列。 实现拖拽功能的关键在于扩展EXT的GridPanel类，添加DragDrop支持。这通常涉及以下几个...

    Ext.Net界面源码C# ASPX

    2. **数据绑定**：可能会涉及到如何将后端数据源（如数据库）与Ext.NET控件绑定，实现数据的动态加载和更新。 3. **事件处理**：展示如何处理Ext.NET控件的客户端事件，如按钮点击、行选择等，并在C#后台进行响应。...

    基于ExtJs在页面上window再调用Window的事件处理方法

    在基于ExtJS开发Web应用程序时，经常会遇到动态创建和管理窗口（Window）的情况。这个问题描述了一个在使用ExtJS的Window组件时遇到的数据加载异常情况，特别是在窗口之间切换时。问题的核心在于，当一个新的Window...

    ext_动态树型的实现

    var window = new Ext.Window({ title: "新增文件&lt;/center&gt;", width: 500, height: 500 }); // 按钮事件 var btn_addFile = { text: "新增文件", handler: function() { window.show(); } }; var btn_add...

    Ext.Net 1.3 Source code

    9. **性能优化**：通过压缩、合并脚本和CSS，以及延迟加载等技术，Ext.Net可以帮助优化Web应用的性能，减少页面加载时间。 10. **调试与扩展**：源代码的开放性使得开发者可以直接查看和修改内部实现，方便调试和...

    ext 3.3 中文 chm

    EXT 3.3 的数据绑定机制也是其强大之处，它允许开发者将模型（Model）的数据直接绑定到视图（View）上，实现了数据与界面的实时同步。通过Store组件，EXT 3.3 可以轻松处理大量数据的存储和操作，同时支持远程数据源...

    Ext教程_javakc

    var win = new Ext.Window({ title: "hello", width: 300, height: 200, html: '&lt;h1&gt;Hello, easyopensource&lt;/h1&gt;' }); win.show(); }); ``` ### 结论 Ext 是一个非常强大的 JavaScript 框架，它不仅提供了...

Magicbox
Global site tag (gtag.js) - Google Analytics