Ext Js 使用心得
1.使用Ext新增一个弹出窗口(组件)时,窗口(组件)的配置对象里的id属性如果和页面上的某个元素E的id相同时,组件会被渲染到元素E上,如果元素E的样式和弹出窗口(组件)的样式不一致时,会导致窗口不能被正常显示。如:
<html>
<head><title>Ext Js</title>
<link href="ext/resources/css/ext-all.css" type="text/css" rel="stylesheet"/>
<script language="javascript" src="ext/adapter/ext/ext-base.js"></script>
<script language="javascript" src="ext/ext-all.js"></script>
<script language="javascript">
function genWindow()
{
var _window = new Ext.Window({id:'treeWindow',border:0,layout:'fit',modal:true,width:200,height:350,html:'myWindow'});
//与页面上的div treeWindow冲突,弹出窗口不能被正常显示
_window.show();
}
Ext.onReady(function(genWindow();));
</script>
<body>
<div id="treeWindow" style="height:400px; width:500px; text-align:center;">content</div>
</body>
</html>
2.Ext弹出窗口(组件)的隐藏和销毁:如果窗口(组件)的内容不是动态获取的,并且有多次调用窗口(组件)的情况或可能时,则需要使用单例模式来创建弹出窗口(组件)对象,并且窗口(组件)的属性closeAction:'hide'(如果有使用窗口的'X'关闭功能),用hide()方法隐藏弹出窗口(组件),而不能closeAction:'hide'或者用close()方法将窗口(组件)销毁.因为用closeAction:'hide'或者用close()方法会将窗口(组件)销毁的同时也将页面上的静态内容一并销毁,第二次调用就会出错(不正常)或者没有内容。
function openTeachPlanList()
{
/**************************************************************************
*如果不是动态内容,并且此方法可能调用多次时,配置窗口属性closeAction:'hide',
*不然可能会出现第二次调用此方式时,静态内容已经被删除。
*每次调用此方法先检查窗口是否已经打开(隐藏)了,是则show(),否则创建
*这种情况属于单例模式的应用,需遵守单例的规则
***************************************************************************/
if(Ext.getCmp('_tplWindow'))
{
Ext.getCmp('_tplWindow').show();
return;
}
var tplWin = new Ext.Window({
id:'_tplWindow',
contentEl:'teachPlanList',//静态内容
title:'教案列表',
border:0,
layout:'fit',
buttonAlign:'center',
closeAction:'hide',//注意这里使用了hide
modal:true,
width:500,
height:250
});
tplWin.show();
}
分享到:
相关推荐
- **调试技巧**:分享了调试Ext JS应用的有效方法,包括使用浏览器的开发者工具来进行调试。 - **部署策略**:指导读者如何将Ext JS应用程序打包和部署到生产环境中。 #### 五、学习建议 - 对于初学者来说,建议先...
ExtJS是一个广泛使用的JavaScript库,特别适用于构建富客户端应用程序。在4.0版本中,它提供了许多强大的组件和工具,帮助开发者创建功能丰富的Web应用。本文将深入探讨Ext.util.Format.Number()函数,它是ExtJS 4.0...
### EXT开发过程中的心得 #### 一、EXTJS开发注意事项概览 在使用EXTJS进行Web应用程序开发的过程中,积累了一些经验和技巧,以下是一些重要的注意事项和建议: 1. **CSS和JS文件路径设置:** - 在加载CSS或JS...
【描述】虽然描述为空,但我们可以推断这篇博客可能详细介绍了作者在使用和开发Ext JS扩展过程中的心得体会,包括但不限于解决的问题、实现的功能以及可能遇到的陷阱。博主“laodaobazi”可能分享了一些实用技巧,...
在IT行业中,Ext JS是一个非常流行的JavaScript库,用于构建富客户端Web应用程序。它提供了一整套组件,包括GridPanel,这是一个强大的数据展示工具,能够处理大量数据并支持各种交互功能。"ext gridpanel 跨行"这个...
《API Ext2.2中文文档》是一份详细解读Ext JS 2.2版本API的资料,对于深入理解和应用这个JavaScript框架至关重要。Ext JS是一个用于构建富客户端Web应用程序的开源库,它提供了丰富的组件和功能,使得开发者能够创建...
1. **Ext JS框架**:Ext JS是一款强大的JavaScript库,用于构建桌面级的富互联网应用程序(RIA)。它提供了丰富的组件库,如表格、树形视图、图表等,以及布局管理器,使得开发者可以构建复杂的数据驱动的应用。 2....
Ext JS在发展过程中不仅一步步地巩固着自己在HTML、CSS、JavaScript领域无可比拟的优势,而且已经开始向相关领域发展扩张。例如,它从2.0.2版开始为Adobe的RIA技术AIR提供支持,并且为GWT开发了Ext GWT 2.0,这些都...
Ext JS是一个成熟的、基于JavaScript的前端框架,它提供了一套丰富的UI组件,用来创建丰富的交互式应用程序。Treegrid结合了树形视图和网格功能,允许用户以层次结构展示数据,并能够通过表格形式展示更详细的子节点...
Ext JS是一个用JavaScript编写的跨浏览器的用户界面库,用于构建复杂的前端应用程序。这个网站为开发者提供了大量的学习资源,包括文档、教程、示例代码等,适合各个级别的开发者学习和参考。 - **资源特点**: - ...
7. **EXT_JS实用开发指南**:`EXT_JS实用开发指南_个人整理笔记.docx`可能是作者的个人学习心得,其中包含了实践中遇到的问题和解决方案,对于初学者来说,这样的经验分享非常有价值。 8. **PDF和TXT文档**:`extjs...
ExtJS,作为一款杰出的前端JavaScript框架,以其丰富的组件库和强大的Ajax交互能力,成为了现代Web应用开发的首选工具之一。正如标题“Ext+net开发实例(殷良胜-完整版)”所示,该资源聚焦于如何利用ExtJS与.NET...
最近我们在几个应用都使用到了 ExtJS ,对公司以前开发的一个 OA 系统也正在使用 ExtJS 2.0 进行改造,使得整个系统在用户体验上有了非常大的变化。本教程记录了学 习 ExtJS 的一些心得及小结,希望能帮助正在学习或...
因此,对于ExtJS组件,建议优先使用`Ext.getCmp()`来操作。 ### 学习心得与笔记要点 1. **组件ID的重要性**:在创建ExtJS组件时,务必为其分配一个唯一的ID,这将极大地方便后续通过`Ext.getCmp()`进行组件的查找...
ExtJS是一个用javascript编写,与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 最近我们在几个应用都使用到了ExtJS,对公司以前开发的一个OA系统也正在使用ExtJS...
博客中的“extjs笔记(1)”可能是作者分享的学习心得,对于理解这三个js如何协同工作会有很大帮助。 在实际开发中,理解和熟练运用这些核心文件,将有助于构建高效、可维护的ExtJS应用。同时,持续学习和实践是...
`Ext-core.pdf` 是关于Ext Core的文档,Ext Core是ExtJS的基础框架,它提供了一组核心的JavaScript工具和类库,包括DOM操作、事件处理、动画效果等。理解Ext Core是深入学习ExtJS的关键,因为它是整个库的基础,包含...
ExtJS是一个用javascript编写,与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 最近我们在几个应用都使用到了ExtJS,对公司以前开发的一个OA系统也正在使用ExtJS...
本文将基于一份初学者的学习心得,详细介绍ExtJS的基础知识,并通过具体的示例来帮助理解如何使用ExtJS创建窗口(Window)和标签页(Tab Panel)。 #### 二、基础知识介绍 1. **Ext.onReady()** - 这个函数确保当DOM...