ExtJS:一个很强大的ui库
创建一个漂亮的alert "helloworld"
Ext.onReady(function(){
Ext.Msg.alert("hello");
});
Ext.onReady 表示当全部资源加载之后再操作里面的内容。
当然好的程序离不开好的ide的支持
推荐使用 spket
当然一个alert远远不足以表达ext的优秀，我们再来一个helloPanel
<html>
<head>
<title>hello</title>
<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/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script>
Ext.onReady(function(){
var panel = new Ext.Panel({
id:'panel_hello',
title:'hellotitle',
width:200,
height:200
});
//对那个id="hello"的div进行渲染
panel.render("hello");
});
</script>
</head>
<body>
This is my HTML page. <br>
<div id="hello"></div>
</body>
</html>
我们再看看 简单的布局
<html>
<head>
<title>hello</title>
<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/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script>
Ext.onReady(function(){
var viewport = new Ext.Viewport({
id:'desk',
//布局类型，不熟悉的去看看GUI 类似的 什么流式，网格
layout:'border',
//中间自动填充
items:[{region:'north',height:50},{region:'west',width:200},{region:'center'}]
})
});
</script>
</head>
<body>
This is my HTML page. <br>
<div id="hello"></div>
</body>
</html>
当使用布局之后 发现无需渲染就直接分割了 不过我们的This is my HTML page. 也不显示了
如果我们使用ie对进行打开 将报错
解决办法 实际上<body>中的This is my HTML page. <br>这句话在这里本身就不起作用 我们删除之后ie下就可以正常显示了 当然在其它页面也有可能发生，只需将类似的内容去掉就可以了
不过在第alert("hello")中在ie下还是会出现偏移的情况
Ext.Msg.alert("hello","helloworld000000000000000000000000");
第一个参数是title 第二参数是内容 我们可以把内容用空格填充伸长，这应该算是ext的一个bug了吧
工具的安装 java -jar spket-1.6.11.jar
分享到：
相关推荐
1. **创建 `helloworld.js` 文件：** ```javascript Ext.application({ name: 'HelloExt', launch: function () { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ title: 'HelloExt', ...
- 在 Webroot 目录下新建 `helloworld.js` 文件，并添加如下内容： ```javascript Ext.application({ name: 'HelloExt', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', ...
### ExtJS 入门教程详解 #### 一、ExtJS 概览 ##### 1.1 ExtJS 定义及特点 - **定义**: ExtJS 是一款强大的前端框架，主要用于构建复杂的用户界面（UI），其核心特性在于它是一个与后台技术相对独立的前端 AJAX ...
### 让我们开始EXTJS之旅 ...<TITLE>ExtJS2-HelloWorld <link rel="stylesheet" type="text/css" href="ExtJS2/resources/css/ext-all.css"/> <script type="text/JavaScript" src="ExtJS2/adapter/ext/ext-base.js"> ...
- **步骤一：** 在WebRoot目录下创建`helloworld.js`文件，并输入以下代码： ```javascript Ext.application({ name: 'HelloExt', launch: function () { Ext.create('Ext.container.Viewport', { layout: '...
### ExtJs2.0简明教程 #### 一、ExtJS简介 ExtJS是一款基于JavaScript的前端框架，它提供了一套完整的用户界面解决方案，能够帮助开发者快速构建高性能、跨浏览器的Web应用程序。ExtJS2.0是该框架的一个重要版本，...
#### 二、为什么写EXTJS的初级简单教程？ 目前市场上关于EXTJS的教学资源相对较少，尤其是在中文领域，高质量的、系统化的学习材料更是稀缺。这对于初学者来说无疑增加了学习的难度。撰写一份初级的、简单的EXTJS...
- **JavaScript文件**: 创建 `helloworld.js` 文件,编写简单的面板展示代码。 **2.2 测试示例** - **路径配置**: 确保HTML文件中的CSS和JS文件路径正确无误。 - **访问地址**: 通过浏览器访问 `...
例如，“ExtJS2.0”、“ExtJS2.1”等，这表示了ExtJS框架的发展和更新历史。每个新版本的发布通常会包含新特性和组件、性能提升和对旧版本问题的修复。 内容中还出现了多个与下载和资源相关的关键字，如“ext-2.0....
**2.1 HelloWorld示例** HelloWorld是编程语言中最经典的入门示例之一，其目的是让初学者快速熟悉开发环境的基本配置和运行方式。在ExtJS中，可以使用`Ext.MessageBox.alert`方法来显示一个简单的消息框： ```...
### Web开发前端技术教程：JavaScript框架Extjs4.0学习指南 #### 一、Extjs简介与初步了解 ##### 1.1 Extjs概述 Extjs是一款基于JavaScript的开源前端框架，专注于创建丰富的互联网应用程序（RIA）。它提供了一...
1. **创建 HelloWorld 示例**：在 Webroot 目录下新建文件 `HelloWorld.js`，并在其中输入以下代码： ```javascript Ext.application({ name: 'HelloExt', launch: function () { Ext.create('Ext.container....
1. **创建Hello World示例**：在项目的`WebRoot`目录下创建一个新的JavaScript文件（例如`helloworld.js`），并在其中输入以下内容： ```javascript Ext.application({ name: 'HelloExt', launch: function () ...
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...
**2.1 HelloWorld示例代码** ```html 无标题文档 <link rel="stylesheet" type="text/css" href="extjs2.0/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs2.0/adapter/ext/ext-...
3.2.3 编写HelloWorld.html 3.2.4 运行调试ExtJS 3.3 辅助开发 3.3.1 调试工具Firebug 3.3.2 开发利器Spket 第4章 ExtJS事件机制 4.1 设计模式——观察者模式 4.2 自定义事件 4.3 浏览器事件 4.4 ExtJS中的...
3.2.3 编写HelloWorld.html 3.2.4 运行调试ExtJS 3.3 辅助开发 3.3.1 调试工具Firebug 3.3.2 开发利器Spket 第4章 ExtJS事件机制 4.1 设计模式——观察者模式 4.2 自定义事件 4.3 浏览器事件 4.4 ExtJS中的...