<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hello World Window Example</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var win;
var button=Ext.get('show-btn');
button.on('click',function(){
//首次click时,win为undefined,!win为true;
if(!win){
win=new Ext.Window({
applyTo:'hello-win',
layout:'fit', //自适应
width:500,
height:300,
closeAction:'hide',//简单地隐藏窗口,默认的操作是'close'
plain:true,//把窗体的body区域用一个透明背景来渲染， 这样它将被融合进框架元素
items: new Ext.TabPanel({
applyTo:'hello-tabs',
autoTabs:true,
activeTab:1, //标签页的一个字符串id或者一个数字索引，在渲染时内部激活
deferredRender:false,//每个标签页是否在第一次被访问时才渲染
border:false
}),
buttons:[{
text:'Submit',
disabled:true
},{
text:'Close',
handler:function(){
win.hide();
}
}]
});
}
win.show(this);
});
});
</script>
</head>
<body>
<input type="button" id="show-btn" value="Hello World" />
<div id="hello-win" class="x-hidden">
<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<!-- Auto create tab 1 -->
<div class="x-tab" title="Hello World 1">
<p>Hello...</p>
</div>
<!-- Auto create tab 2 -->
<div class="x-tab" title="Hello World 2">
<p>... World!</p>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
在"ExtJS----HelloWorld程序源码"中，我们将会看到如何使用ExtJS来创建一个简单的“你好，世界！”应用。以下是对这个示例中涉及的主要知识点的详细解释： 1. **引入ExtJS库**：首先，你需要在HTML文件中引入ExtJS...
在"ExtJS5学习之Hello World"这个主题中，我们将深入探讨如何使用ExtJS5进行基本的开发工作。 首先，ExtJS5的"Hello World"程序通常是一个简单的窗口应用，展示如何创建一个基本的ExtJS应用。在这个例子中，我们...
根据提供的文件信息，本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法，帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架，用于创建...
在EXTJS3中，开发Web应用时经常需要创建可弹出的窗口（Window）来处理用户的交互操作，例如编辑、查看或确认等。本话题主要关注如何在EXTJS3的Window组件中实现一个功能：当用户在窗口内修改了数据后，关闭窗口时...
总结起来，EXTJS中实现Window的最小化和还原功能需要对EXTJS组件系统有深入理解，包括Window组件的属性和方法，以及事件驱动的编程模式。通过自定义事件处理和状态管理，我们可以为EXTJS应用添加这样的高级交互功能...
简单的ExtJS版的helloworld.html代码
这个"ExtJS2Samples-v2.1.zip_DEMO_ExtJS2Samples_extjs"压缩包包含的是ExtJS 2.1版本的官方示例，是学习和理解ExtJS 2.0核心功能的宝贵资源。在深入探讨之前，让我们先了解下ExtJS的基本概念。 ExtJS 是由Sencha...
《ExtJS2Samples-v2.0.0.zip：探索C语言与ExtJS2Samples的结合应用》 在软件开发领域，C语言以其高效、灵活和强大的底层控制能力，始终占据着重要的地位。与此同时，Web前端技术也在不断发展，ExtJS作为一款优秀的...
ExtJS 是一个强大的JavaScript应用程序框架，专为构建复杂的、数据驱动的Web用户界面而设计。在"HelloWorld.rar"这个压缩包中，我们很显然会...总之，"HelloWorld.rar"是一个理想的实践平台，帮助你踏上ExtJS开发之旅。
标题“extjs4 helloworld”指的是使用Ext JS 4框架创建的一个基础的“Hello, World”应用程序。Ext JS是一个强大的JavaScript库，用于构建富客户端Web应用程序。它提供了一个全面的组件模型，允许开发者构建复杂的...
ExtJS是一个广泛使用的JavaScript库，专门用于构建富客户端Web应用程序。2.3.0是ExtJS的一个较早版本，发布于2008年左右，虽然现在最新的版本已经发展到7.x系列，但2.3.0对于学习基础和理解ExtJS的核心概念仍然有...
**Element**是ExtJs中最核心的概念之一，它为DOM操作提供了统一而强大的API。 ##### **3.1 获取DOM节点** 传统JavaScript中，我们通常使用`document.getElementById('id')`获取DOM节点。这种方法虽然有效，但在...
这篇博客“extjs入门之hello world”应该是引导初学者了解并开始使用ExtJS的基本步骤。由于描述部分是空的，我们将主要依据标题和标签来探讨相关知识点。 首先，让我们来看看“源码”这个标签。在学习任何编程技术...
创建一个名为helloworld.js的JavaScript文件，定义一个EXTJS应用，创建一个容器组件，并在其中放置一个具有标题和内容的Panel。同时，创建一个helloworld.html文件，引入EXTJS的CSS和JavaScript库以及自定义的hello...
ExtJs是一种基于JavaScript的富客户端应用开发框架，用于构建交互式和复杂的Web应用程序。它提供了大量的组件和功能，包括布局管理、数据绑定、表格、菜单、工具提示等，使得开发者可以构建具有桌面应用般用户体验的...
在给定的“ExtJS samples”压缩包中，我们可以期待找到关于如何使用ExtJS的TreePanel和TreeNode的相关示例。TreePanel是ExtJS中的一个组件，用于展示层次结构的数据，而TreeNode则是TreePanel的基本构建块，代表树形...
在基于ExtJS开发Web应用程序时，经常会遇到动态创建和管理窗口（Window）的情况。这个问题描述了一个在使用ExtJS的Window组件时遇到的数据加载异常情况，特别是在窗口之间切换时。问题的核心在于，当一个新的Window...
一个完整的extjs窗体应用，包含form布局，column布局，很实用！
在 ExtJS4 中，API 也发生了很大的变化，包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中，我们可以使用 Ext....
SpinkaJS 项目： 问题跟踪器： CI： 演示： : 使用 ExtJS 库的示例 hello world 项目