`
hxyt20
  • 浏览: 91575 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论

ext2.0学习入门笔记1

EXTCSSJavaScriptAIRIE 
阅读更多

                                         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.

    

  

  

  

 

 

0
顶
0
踩
分享到：
| FreeMarker入门笔记1
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics