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

extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

 
阅读更多
<script type="text/javascript" src="extjs/ext-2.0/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="extjs/ext-2.0/ext-all.js"> </script>
<script type="text/javascript" src="extjs/localXHR.js"></script>
<script type="text/javascript" src="gwicom.js"></script>
Ext.extend(ExtMagcard.app,Ext.util.Observable,{
			main: new ExtGwi.TabPanel({
					activeTab:0,
					frame:true,
					id:'tests',
					items:[{
					title:'读发卡机操作',
					frame:true,
					/////////////
					html: '<div id="card"></div>',
					url: 'magcard/magcard.html'
					//autoLoad:{url:'magcard/magcard.html',scripts:true}
					},{
					title:'IC卡操作',
					frame:true,
					html: '<div id="magcard_ic"></div>',
					url: 'magcard/magcard_ic.html'
					//autoLoad:{url:'magcard/magcard_ic.html',scripts:true}
					},{
					title:'射频卡操作',
					frame:true,
					html: '<div id="rfcard"></div>',
					url: 'magcard/magcard_rf.html'
					//autoLoad:{url:'magcard/magcard_rf.html',scripts:true}
					},{
					title:'SAM卡操作',
					frame:true,
					html: '<div id="magcard_sam"></div>',
					url: 'magcard/magcard_sam.html'
					//autoLoad:{url:'magcard/magcard_sam.html',scripts:true}
					},{
					title:'配置',
					frame:true,
					html: '<div id="hello-win"></div>',
					url: 'magcard/p_magcard.html'
					//autoLoad:{url:'magcard/p_magcard.html',scripts:true}
					}]
			}),
			init:function(){
					var w = new Ext.Window({
							 width: 650,
							height:600,
							minWidth: 300,
							minHeight: 200,
							layout: 'fit',
							plain:true,
							closable : false,
							bodyStyle:'padding:5px;',
							items:[this.main]
						});
					w.show();
			}

});

另外加上gwicom.js和jquery-1.7.1.jar就可以了。
说明:extjs加载本地页面数据时,在ie6上没有问题,但是在ie8,ie9上有安全性问题,无法加载本地页面数据,jquery的ajax处理机制在ie6,ie8,ie9上
都可以加载本地页面数据,故扩展extjs相关类,使其加载数据时,使用jquery的ajax加载数据机制,当前,bstrun上相关页面主要有:tab和tree两种组件需要
动态加载本地页面数据,故扩展了这两种组件。由于jquery与bstrun页面中的ajax.js部分实现有冲突,故通过嵌入iframe的方式,再加载jquery相关内容,间接
使用jquery的相关内容。
  • jq.rar (67.2 KB)
  • 下载次数: 2
分享到:
评论

相关推荐

    Ext grid panel 滚动条位置不变

    Ext grid panel 是Ext JS框架中的一个组件,用于展示表格形式的数据。它提供了丰富的功能,如分页、排序、筛选等,并且可以通过配置实现自定义样式和交互行为。对于实时数据的展示,保持滚动条位置不变是一个关键...

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    在ExtJS中,树形组件(TreePanel)是一个常用的功能,用于展示层次结构的数据。当树形组件结合复选框时,可以实现用户对节点的选择操作,如全选、反选、子选父以及父选子。这些功能在数据管理、权限分配等场景中非常...

    Ext组件描述,各个组件含义

    - **功能描述**:Component 是所有 Ext 组件的基础类,它定义了所有 Ext 组件都共有的基本属性和方法。 - **主要用途**:作为所有其他组件的基类。 **1.5 Container (Ext.Container)** - **xtype**: `container` -...

    Extjs帮助文档.pdf

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

    Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...

    Extjs4.0+MVC模式+存动态加载

    通过学习这些示例,你可以更好地理解如何在实际项目中运用ExtJS 4.0的MVC模式和动态加载技术。 总之,ExtJS 4.0结合MVC模式和动态加载,提供了构建高效、可扩展的Web应用的强大工具。通过深入了解和实践,开发者...

    extjs4 MVC2 TreePanel动态JSON实现

    根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...

    ExtJS构造动态异步加载

    在IT领域,特别是Web开发中,ExtJS是一个广泛使用的JavaScript框架,它提供了丰富的用户界面组件和强大的数据管理功能。本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构,结合AJAX技术实现JSON数据的高效...

    精通JS脚本之ExtJS框架.part2.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    ExtJs组件类的对应表

    本文将详细介绍ExtJs中的组件类及其对应的功能,帮助读者更好地理解和运用这些组件。 #### 基本组件 1. **`button`** - 对应于`Ext.Button`类,是ExtJs中最基础的按钮组件,用于触发事件或执行某些操作。 2. **`...

    extjs-tree.zip_extjs tree

    在ExtJS中,TreePanel是用于展示树形数据的组件。它支持各种功能,包括节点的拖放、展开与折叠、异步加载等。异步树形控件意味着树形结构的数据不是一次性加载的,而是根据需要动态从服务器获取,这大大提高了性能,...

    精通JS脚本之ExtJS框架.part1.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    ExtJs GridPanel双击事件获得双击的行

    在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...

    exxtjs4.0中树的用法

    在EXTJS 4中,`Ext.tree.TreePanel`被重命名为`Ext.tree.Panel`,并且不再直接继承自`Ext.Panel`,而是继承自`Ext.grid.Panel`,因为树形组件现在使用表格视图(View)来展示数据。此外,节点的存储结构从`TreeNode`...

    extjs xtype

    EXTJS 是一个流行的JavaScript框架,用于构建富...在EXTJS开发中,理解和熟练运用`xtype`、`Ext.QuickTips.init()`以及`vtype`能够帮助我们更高效地构建用户界面,提供更好的用户体验,同时确保数据的准确性和安全性。

    extJs3升级extjs4方案

    在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中,我们可以使用 Ext....

    extjs实现动态树加载菜单

    动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次加载时的数据量。 动态树加载,也称为懒加载或按需加载,是指在用户滚动、展开节点或执行其他操作...

    老师整理的extjs学习笔记

    `Ext.XTemplate` 类似于 `Ext.Template`,但它更加强大和灵活,支持更复杂的逻辑和数据处理。例如,它可以用于遍历数组或对象,并根据条件生成不同的 HTML 内容。 #### 三、Event、Component and Container **3.1 ...

    Extjs做的treepanel+tab切换页

    6. **页面布局**:整个页面可能使用了ExtJS 的布局管理器,如`border`布局,将页面分为左侧和右侧两部分,左侧是TreePanel,右侧是可折叠的TabPanel。 7. **URL 链接处理**:`嘉瑞传播.url`可能是一个树节点的`href...

Global site tag (gtag.js) - Google Analytics