ext2.0学习入门笔记1
1.先去http://www.extjs.com/download下载ext2.0的压缩包.
2.随便解压缩到什么目录下，不管目录名是什么，最后应该看到里边是这样的目录结构。
adapter,air,build, docs, examples,resources,source,
CHANGES.txt, ext-all.js, ext-all-debug.js, ,ext-core.js,
ext-core-debug.js, INCLUDE_ORDER.txt,LICENSE.txt
3.现在我们利用它的目录结构写一个HelloWorld例子：
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script>
Ext.onReady(function(){
Ext.MessageBox.alert('helloworld', 'Hello world');
});
</script>
4.接下来我们写一个Ext.grid.GridPanel的例子：
<html>
<head>
<title>Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
</head>
<body>
<div id="grid1"></div>
</body>
<script type="text/javascript">
var readerSex = function(value){
if(value=='male'){
return "<span style='color:#FF0000; font-weight:bold'>红男</span>";
}else{
return "<span style='color:green; font-weight:bold'>绿女</span>";
}
};
var renderDescn=function(value, cellmeta, record, rowIndex, columnIndex, store){
var str ="<input type='button' value='查看详细描述' onClick='alert(\""+
"这个单元格的值:"+value+"\\n"+
"这个单元格的配置:cellId="+cellmeta.cellId+", id="+cellmeta.id+", css:"+cellmeta.css+"\\n"+
"这个单元格所在行的record:"+record+",一行数据全在这里"+"\\n"+
"该单元格所在的行rowIndex:"+rowIndex+"?\\n"+
"这个单元格所在的列columnIndex:"+columnIndex+"?\\n"+
"这个Ext.data.store???,store="+store+"\")'/>";
return str;
}
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号', dataIndex:'id', sortable:true},
{header:'姓名', dataIndex:'name'},
{header:'性别', dataIndex:'sex', renderer:readerSex},
{header:'描述', dataIndex:'descn', renderer:renderDescn}]);
var data = [['id1', 'name1','male', 'descn1'],
['id2', 'name2','female', 'descn2'],
['id3', 'name3','male', 'descn3']];
var ds = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({}, [
{name:'id'},
{name:'name'},
{name:'sex'},
{name:'descn'}
])
});
var el = Ext.get('grid1');
var grid= new Ext.grid.GridPanel({
el:el,
ds:ds,
cm:cm,
sm:sm,
bbar:new Ext.PagingToolbar({
pageSize:2,
store:ds,
displayInfo:true,
displayMsg:'显示第{0}条记录到第{1}条记录,共{2}条记录',
emptyMsg:'没有记录',
paramNames:{
start:1,
limit:2
}
})
});
ds.load();
grid.render();
</script>
</html>
出现的问题：
1.当我第一次运行这段代码时发现，它在火狐浏览器上可以运行，但是在IE浏览器上确不能运行，原来是我在
var data = [['id1', 'name1','male', 'descn1'],
['id2', 'name2','female', 'descn2'],
['id3', 'name3','male', 'descn3']];
这段代码中中多了一个"，",这样才会出现这样的结果，所以大家一定要细心啊!
5.现在我们来做一个静态的树，即做一个Ext.tree.TreePanel的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
</head>
<body>
<div id="tree" style="height:300px"></div>
</body>
<script type="text/javascript">
var root = new Ext.tree.TreeNode({text:'我是根'});
var node1 = new Ext.tree.TreeNode({text:'枝1'});
var node2 = new Ext.tree.TreeNode({text:'枝2'});
var leaf1 = new Ext.tree.TreeNode({text:'叶1'});
var leaf2 = new Ext.tree.TreeNode({text:'叶2'});
root.appendChild(node1);
root.appendChild(node2);
node1.appendChild(leaf1);
node1.appendChild(leaf2);
var tree = new Ext.tree.TreePanel({
el:'tree'
});
tree.setRootNode(root);
root.expanded=true;
tree.render();
</script>
</head>
<body>
</body>
</html>
以上是我们今天总结的一些知识点，如果以上的那个下载地址不行，可以到附件中去下载ext-2.0.1.zip.
分享到：
相关推荐
ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...
资源名称：Ext2.0学习入门资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
EXT 2.0学习资料 关于EXT的基本入门学习的PDF
### Ext2.0学习笔记：深入理解Ajax与Ext框架 #### Ajax：实现异步无刷新数据交换的关键技术 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它利用了...
1. **组件库增强**：EXT2.0扩展了原有的组件库，增加了如树形表格、tabpanel、日期选择器等更多实用的UI组件，使得开发者可以构建出更为复杂的Web应用界面。 2. **布局管理**：在布局方面，EXT2.0引入了更灵活的...
EXT2.0的学习资料包括JAR包和相关的学习文档，这将帮助我们深入理解EXT2.0的工作原理和应用方法。 首先，我们要了解EXT2.0的核心概念。EXT2.0主要由组件（Components）、布局（Layouts）和数据绑定（Data Binding）...
ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0
2. **Ext 2.0 简明教程**: 这个教程可能是以CHM格式提供的，旨在快速引导开发者入门Ext 2.0。它可能包含实例代码和逐步指南，解释了基本的组件使用、事件监听、数据模型和数据存储的配置等基础知识。通过这个教程，...
总之，这些资料为学习EXT2.0提供了全面的资源，包括理论知识、实践指导和源代码分析，对于希望提升EXT2.0开发技能的人来说是一份宝贵的学习材料。通过这些资源，开发者可以深入了解EXT2.0的核心特性和应用场景，并...
在EXT 2.0的压缩包文件"ext-2.0"中，可能包含了EXT库的JavaScript文件、CSS样式文件、图像资源以及示例代码等，开发者可以通过这些资源学习EXT 2.0的使用方法，快速上手并创建自己的富互联网应用。通过深入理解和...
这个文件系统在1993年由Rebecca Ann Heineman和Stephen Tweedie开发，作为EXT1的升级版，旨在解决EXT1在大容量硬盘上的性能和扩展性问题。EXT2.0作为EXT2系列的一个重要版本，引入了多项改进，为Linux用户提供了更加...
1. **组件化**：Ext 2.0基于组件的设计思想，允许开发者通过组合各种小部件来构建复杂的用户界面。这些组件可以是按钮、表单、面板、窗口等，每个组件都有其特定的功能和样式，可以单独使用或与其他组件组合。 2. *...
EXT2.0在EXT1.x的基础上进行了大量的改进和优化，增加了更多的UI组件，提升了性能，并且强化了对Ajax和数据绑定的支持。Ajax技术允许Web应用在不刷新整个页面的情况下与服务器进行交互，提供更流畅的用户体验。EXT...
EXT2.0入门教程主要会涵盖以下几个关键知识点： 1. **EXT基本概念**：首先，你需要理解EXT是一个基于JavaScript的库，它扩展了浏览器的原生功能，提供了面向对象的API。EXT库由多个模块组成，包括Core、Data、UI ...
语言很幽默的一本EXT 2.0基础知识教程，想进军AJAX的朋友可以参考一下，主要说些基本性的东西。
1. **引入插件**：首先，需要在EXT2.0应用的页面中引入`localXHR.js`文件，确保该插件可被EXT框架识别和使用。 2. **创建本地请求对象**：在EXT2.0中，通常我们使用`Ext.Ajax`来发送AJAX请求。对于本地文件，我们...
EXT2.0经典PDF合集是一套全面涵盖EXT2.0技术的学习资源，旨在帮助初学者从基础到高级，逐步掌握EXT2.0的核心概念和应用。EXT2.0是Sencha公司推出的一个强大的JavaScript库，主要用于构建富互联网应用程序（RIA）。这...
根据提供的标题“ext2.0学习文档 pdf”和描述“ext2.0学习文档，很好用的哦。看了受益匪浅，所以上传大家一起分享”，我们可以推测这份文档是关于ext2文件系统的学习资料。接下来，我们将从给定的部分内容中提取并...
通过分析这个EXT 2.0项目源代码，开发者可以学习如何组织EXT应用程序的结构，如何利用EXT的API创建组件，如何处理数据交互，以及如何实现特定的功能。对于想要提升EXT编程技能或者希望理解EXT内部机制的人来说，这是...
帮助手册通常包含了详细的API文档，对每个类、方法、属性进行了详尽的解释，是开发者学习和使用Ext2.0的重要参考资料。 9. **示例和教程**： 除了API文档，帮助手册往往还包含了大量的示例代码和教程，通过实际...