### Extjs4.0中文学习手册与入门详解 #### 一、Extjs4.0简介与获取 **Extjs4.0**是一款基于JavaScript的开源前端框架,它提供了丰富的用户界面组件和强大的数据处理功能,使得开发者能够快速构建高性能、交互性强的Web应用。对于初学者来说,熟悉Extjs4.0的基础知识是非常重要的。 - **获取Extjs4.0**: - 官方网站:可以从[http://extjs.org.cn/](http://extjs.org.cn/)获得需要的Extjs发布包及更多支持。 - 下载最新版本的Extjs4.0压缩包,并解压。 - **搭建学习环境**: - 假设您的开发环境中已安装MyEclipse和Tomcat。 - 在MyEclipse中新建一个Web项目,例如命名为`Extjs4`。 - 将Extjs4.0.7压缩包解压后的所有文件复制到项目根目录下的`WebContent`文件夹中。 - `Examples`目录包含了Ext官方提供的示例程序,其中可能包含PHP代码,如果遇到错误信息可暂时忽略。 - 部署并启动Tomcat服务器。 - 测试环境是否可用:打开浏览器访问`http://localhost:8080/Ext4/index.html`。 - 查看API文档:`http://localhost:8080/Ext4/docs/index.html` - 查看示例页面:`http://localhost:8080/Ext4/examples/index.html` #### 二、编写第一个Extjs程序 - **创建Hello World示例**: - 在`WebContent`目录下新建`helloworld.js`文件,并输入以下内容: ```javascript Ext.onReady(function(){ Ext.create('Ext.panel.Panel', { title: 'Hello Ext', width: 350, bodyPadding: 5, items: [{ xtype: 'label', text: 'Hello! Welcome to ExtJS.' }] }).render(document.body); }); ``` - 创建`helloworld.html`文件,并输入以下内容: ```html Hello ExtJS ``` - 浏览器访问`http://localhost:8080/Ext4/helloworld.html`,如果一切正常,您将看到一个带有标题“Hello Ext”的面板,内容为“Hello! Welcome to ExtJS.”。 - **理解Ext.onReady和Ext.application**: - `Ext.onReady`:该方法在当前DOM加载完成后自动调用,确保页面内的所有元素都能被脚本引用。示例代码: ```javascript Ext.onReady(function(){ alert('Hello World!'); }); ``` - `Ext.application`:用于定义一个Ext应用的基类,通常用于构建完整的Ext应用。 #### 三、DOM操作与事件响应 - **获取DOM元素**: - 使用`Ext.get`方法根据ID获取页面上的元素: ```javascript var myDiv = Ext.get('myDiv'); ``` - `Ext.get`返回的是一个`Element`对象,可以直接操作底层DOM节点。 - **选择器**: - 使用`Ext.select`方法获取具有特定CSS选择器的所有元素: ```javascript var paragraphs = Ext.select('p'); ``` - `Ext.select`返回的是`Ext.CompositeElement`对象,可通过其中的`each()`方法遍历所选元素。 - **事件处理**: - 给按钮添加单击事件响应: ```javascript var button = Ext.get('myButton'); button.on('click', function(){ alert('Button clicked!'); }); ``` #### 四、Extjs4布局详解 - **Fit布局**: - Fit布局中,子元素会自动填充整个父容器空间。 - 如果在Fit布局中放置了多个组件,仅显示第一个子元素。 - 示例代码: ```javascript Ext.create('Ext.window.Window', { title: 'Fit Layout Example', layout: 'fit', width: 400, height: 300, items: [ {xtype: 'grid', store: myStore} ] }).show(); ``` - **Border布局**: - Border布局允许在一个容器内将子组件分成五个区域:北(North)、南(South)、东(East)、西(West)和中心(Center)。 - 每个区域可以包含一个或多个子组件,子组件可以根据布局规则调整其大小和位置。 - 示例代码: ```javascript Ext.create('Ext.panel.Panel', { title: 'Border Layout Example', layout: 'border', width: 600, height: 400, items: [ {xtype: 'grid', region: 'center', store: myStore}, {xtype: 'panel', region: 'west', width: 200, collapsible: true, title: 'Navigation'}, {xtype: 'toolbar', region: 'north', title: 'Toolbar'} ] }).show(); ``` 通过以上步骤,您已经完成了Extjs4.0的初步学习,并能够掌握如何搭建开发环境、编写基础示例程序、操作DOM元素、处理事件以及理解不同类型的布局。希望这些基础知识能帮助您更好地探索和学习Extjs4.0。
2024-11-07 08:49:37 2.16MB Extjs4.0中 文学习手册 入门详解
1
本文实例讲述了python飞机大战 pygame游戏创建。分享给大家供大家参考,具体如下: 目标 项目准备 使用 pygame 创建图形窗口 理解 图像 并实现图像绘制 理解 游戏循环 和 游戏时钟 理解 精灵 和 精灵组 项目准备 新建 飞机大战 项目 新建一个 hm_01_pygame入门.py 导入 游戏素材图片 游戏的第一印象 把一些 静止的图像 绘制到 游戏窗口 中 根据 用户的交互 或其他情况,移动 这些图像,产生动画效果 根据 图像之间 是否发生重叠,判断 敌机是否被摧毁 等其他情况 01. 使用 pygame 创建图形窗口 小节目标
2023-10-08 16:39:29 472KB pygame python rect
1
详细介绍 Unity全局光照技术入门 知识。包括理论上的探讨,参数的详细说明,还有Shader中的应用等。
2022-11-20 21:55:49 2.03MB Unity 全局光照 Light Probe
1
AVR单片机GCC 程序设计 GCC AVR入门详解 GCC AVR入门源码
1
适合isight初学者,熟悉优化算法与软件界面
2022-08-23 16:06:28 15.44MB isight 优化
1
基于StarterWare的TMS320C6748裸机程序开发入门详解教程
2022-07-04 11:06:17 2.67MB DSP C6748
1
1、系统介绍Android/Linux的设备树dts的规则和用法; 2、对设备树dts各个知识点进行系统的总结; 3、设备树dts的基本语法和基本格式介绍; 4、设备树dts的组成,各个模块使用方法,实例分析。
1
这是一个小工程,我用eclipse写的。虽是入门级别,但是涉及导包,传参,连接数据库,得到返回值,编码问题处理。全是个人摸索的,所有的坑几乎全掉进去过。经验宝贵!
2022-02-27 20:13:06 41.1MB java python
1
Redis快速入门PPT,非常详细,非常基础。学会基础就掌握了一大半了,做的非常不错的PPT,非常值得下载。
2021-11-04 16:50:00 885KB Redis 快速入门 详解
1
python小白初级入门进阶入门详细教程PPT以及题目,帮助你实现从python小白到python达人的蜕变!
2021-10-24 11:49:50 64B python 初级入门详解
1