ext2.0学习入门笔记1
?????????????????????????????????????????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" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/adapter/ext/ext-base.js"></script><script type="text/javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/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" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/adapter/ext/ext-base.js"></script> <script type="text/javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/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" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/adapter/ext/ext-base.js"></script> <script type="text/javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/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.
????
??
??
??
?
?