extjs的语法很像java，对于这些组件的使用基本都是面向对象的。今天这部分内容，和swing 非常相似。
现亮一个window给大家看看：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< link rel ="stylesheet" type ="text/css" href ="ext/resources/css/ext-all.css" >
< script type ="text/javascript" src ="ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="ext/ext-all.js" ></ script >
< title > 学习ExtJS之Panel </ title >
< script type ="text/javascript" >
Ext.onReady( function ()
{
var win = new Ext.Window(
{
title: " 标题 " ,
width: 300 ,
height: 200 ,
html:' < h1 > hello,my name is 274 !</ h1 > '
});
win.show();
});
</ script >
</ head >
< body >
</ body >
</ html >
对于这种var win = new Ext.Window()方式创建对象是不是感觉很亲切？
看看就这么2行代码产生的效果吧：
漂亮并不需要写多少代码。其实这里还有很多可以添加的效果，比如常见的：
plain:true,（默认不是）
resizable:false,(是否可以改变大小，默认可以)
maximizable:true,（是否增加最大化，默认没有）
draggable:false,（是否可以拖动，默认可以）
minimizable:true,（是否增加最小化，默认无）
closable:false,（是否显示关闭，默认有关闭）
//几个前面没有介绍的参数
1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口 hide,关闭后，只是hidden窗口
3.constrain：true则强制此window控制在viewport，默认为false
4.modal:true为模式窗口，后面的内容都不能操作，默认为false
5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认为false
而pannel 和window是差不多的，比如构造参数我都可以直接通用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<title>学习ExtJS之Panel</title>
<script type="text/javascript">
Ext.onReady(function()
{
var panel = new Ext.Panel(
{
title:"标题",
width:300,
height:200,
html:'<h1>hello,my name is 274!</h1>'
});
//win.show();
panel.render("hello");
});
</script>
<style>
body
{
padding:40px;
}
</style>
</head>
<body>
<div id="hello">
</div>
</body>
</html>
分享到：
相关推荐
在 ExtJS4 中，API 也发生了很大的变化，包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中，我们可以使用 Ext....
1. **组件系统**：ExtJS的核心在于其组件模型，包括窗口（Window）、面板（Panel）、表格（Grid）、表单（Form）等。每个组件都是可复用的，可以通过组合这些组件构建复杂的UI结构。 2. **数据绑定**：ExtJS提供了...
在本篇文章中，我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据，并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术，尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...
通过学习这些实例，你可以更好地理解如何在实际项目中应用ExtJs，例如如何创建网格（Grid）、表单（Form）、树形视图（Tree）、面板（Panel）等。实例通常包括完整的HTML、CSS和JavaScript代码，以及详细的解释，...
ExtJs2.0提供了丰富的一系列UI组件，例如面板（Panel）、窗口（Window）、表单（Form）、网格（Grid）等。这些组件是构建现代Web界面不可或缺的元素。中文手册中会详细说明如何创建和使用这些组件，以及它们的配置...
5. **API使用**：熟悉ExtJS 4.1提供的各种类库，如Grid、Panel、Window、Form等，以及它们的方法和属性。 6. **主题和皮肤**：了解如何自定义ExtJS的外观，包括使用SASS和Compass工具来修改主题。 7. **MVC模式**...
1. **组件系统**：EXTJS的核心是其组件模型，包括窗口（Window）、面板（Panel）、表单（Form）、表格（Grid）、树（Tree）等。这些组件都是可重用的，可以组合起来构建复杂的用户界面。 2. **数据绑定**：EXTJS...
在本案例中，“extjs Msgbox封装”指的是将ExtJS的MsgBox功能进行封装，以便更方便地在代码中使用。 在描述中提到的“命名空间封装”，是一种组织JavaScript代码的方式，它有助于避免全局变量污染和冲突。通过创建...
在EXTJS3中，我们可以创建一个新的Panel或Window组件，并在其配置中添加自定义的HTML代码，这部分代码会加载百度地图的JavaScript API。例如： ```javascript var mapPanel = new Ext.Panel({ title: '百度地图', ...
文档中会介绍Panel的使用以及其子类Window和FormPanel的特定功能。 12. **表单组件**：表单是Web应用中不可或缺的一部分，文档会介绍Ext.js提供的各种表单组件以及它们的配置选项和验证功能。 13. **悬停提示与...
创建EXTJS组件，例如一个窗口（Window），可以使用`Ext.Window`构造函数。你需要指定窗口的属性，如标题、宽度、高度以及内容。例如，创建一个简单的窗口并显示它，可以这样写： ```javascript Ext.onReady...
在这一版本中，开发者可以学习如何创建基本的组件，如面板（Panel）、窗口（Window）和表格（Grid），以及如何使用数据存储（Store）和视图（View）进行数据绑定。此外，3.1.1版本还引入了Ajax请求的扩展，使得异步...
1. **快速入门**：这部分通常会介绍如何在项目中引入ExtJS库，创建基本的页面结构，以及如何使用其核心组件，如面板（Panel）、窗口（Window）和布局（Layout）。 2. **组件库**：ExtJS 3.0包含了大量的UI组件，如...
源码中包含了各种组件的实现，如Window、Panel、Toolbar等，还有布局管理器、数据包、Ajax请求等核心模块。 EXTJS 3.x版本的主要知识点包括： 1. **组件系统**：EXTJS的核心是组件化，包括各种UI元素如Grids、...
- 示例场景：window或panel中放置GRID组件。 - **Border布局**： - 页面分为五个区域：North、South、East、West、Center。 - 区域内可放置组件，每个区域支持嵌套布局。 - 示例代码：创建带有Border布局的Panel...
- **Ext.Panel类**: 详细介绍了一种常用的面板类型——`Panel`，以及其配置选项和使用方法。 #### Panel的子类——Window窗口 窗口是面板的一种特殊形式，可以独立弹出显示。 - **概述**: 简要介绍了窗口的基本...