1.先去下载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 Exampletitle>
- <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 =""+
- "这个单元格的值:"+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>
Array Grid Example
出现的问题：
1.当我第一次运行这段代码时发现，它在火狐浏览器上可以运行，但是在IE浏览器上确不能运行，原来是我在
var data = [['id1', 'name1','male', 'descn1'],
['id2', 'name2','female', 'descn2'],
['id3', 'name3','male', 'descn3']];
这段代码中中多了一个"，",这样才会出现这样的结果，所以大家一定要细心啊!
5.现在我们来做一个静态的树，即做一个Ext.tree.TreePanel的例子：
- >
- <html xmlns="">
- <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>
无标题文档
