您的位置：首页 > Web前端 > JavaScript

ExtJs学习笔记一

2016-03-06 09:42 477 查看

Ext js API文档地址：http://extjs-doc-cn.github.io/ext4api/

一框架概览

1.Ext Js作为一个框架，不仅提供了，UI部件，还提供了许多其他的特性。这些内容可以分为六大部分

Ext JS核心：主要是基础功能，包括Ajax通信，Dom操作和事件管理功能，框架里的其他东西都依赖于这个核心。https://www.sencha.com/products/extjs/#overview
UI组件：包括所有可以与用户进行交互的部件。
Web远程调用：是一种让javascript可以远程地执行服务器端定义的一种方法也叫做远程过程调用或者RPC。主要用于那些希望把服务器端的方法暴露给客户端，又不想被烦人的Ajax方法来管理。主要在direct中可以参考。
数据服务：包括对数据的提取，解析以及把信息加载到数据存储器。主要处理的类型有数组，XML以及JSON（几乎已经成为客户端与服务端之间的通信标准）。
拖放：顾名思义，可以对页面上的ExtJS组件或者任意的HTML元素进行拖放操作。
通用工具：主要方便开发人员更容易的处理一些常见任务，比如Format以及CSS单体。

2.容器与布局

容器：管理一个或者多个子元素的部件。
布局：通过布局完成对容器所包含的子元素的可视化摆放。例如Panel与Window容器
实际中其他容器：其他的Container常用的子类容器有FormPanel TabPanel FieldSet QuickTip
网格，DataView和ListView 框架中的数据服务部分是负责数据的加载以及解析，对于数据存储器来说，他的最大用户就是GridPanal 以及DataView和子类ListView。两者实现表格化显示，但GridPanal功能比较多有编辑排序可调整列的功能，DataView以及其子类ListView这比较简便只提供显示功能数据。
TreePanel和叶子：其数据来源不是数据存储器的，而是借助data.Tree类来实现的层次化数据。其数据来源可以是TreeLoader通过Ajax远程获取数据，也可以通过配置实用浏览器端的数据，也可以通过配置支持拖放功能获取
表单输入字段：TextField NumberField Combox TimeField Radiobutton CheckBox HTMLEditor　
其他部件：比如工具条Toolbar　　Menu　MessageBox　Slider

3.下载与配置
下载地址http://download.csdn.net/detail/tanglead/2520580#comment
配置好tomcat后将index.html 放入根文件目录

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试</title>
<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-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';
</script>
<script type="text/javascript" src="/js/helloWorld.js"></script>
</head>
<body>
</body>
</html>

创建文件夹js,编辑helloWorld.js文件

function buildWindow() {

var win =  new Ext.Window({
id       : 'myWindow',
title    : '窗体',
width    : 300,
height   : 150,
layout   : 'fit',
autoLoad : {
url     : 'sayHi.html',
scripts : true
}
});
win.show();
}

Ext.onReady(buildWindow);

创建sayHi.html到根目录

<div id='fxDiv'>Ajax测试div</div>
<script type='text/javascript'>

function highlightWindow() {
var win   = Ext.getCmp('myWindow');
var winBody = win.body;
winBody.highlight();
}

highlightWindow.defer(1000);
</script>

然后开启tomcat并在火狐中测试应用（谷歌浏览器不支持特效）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航