ext2.0学习入门笔记1

ccava2

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例子：
     
Html代码

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>  
  Ext.onReady(function(){
    Ext.MessageBox.alert('helloworld', 'Hello world');
  });
   
  4.接下来我们写一个Ext.grid.GridPanel的例子：
   
Html代码

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
  
  
  
   
  
   
  
   
      var readerSex = function(value){
    if(value=='male'){
      return "红男";
    }else{
      return "绿女";
    }
  };
  
  var renderDescn=function(value, cellmeta, record, rowIndex, columnIndex, store){
    var str ="";
  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();
  


出现的问题：
   1.当我第一次运行这段代码时发现，它在火狐浏览器上可以运行，但是在IE浏览器上确不能运行，原来是我在
      var data = [['id1', 'name1','male', 'descn1'],
                 ['id2', 'name2','female', 'descn2'],
                 ['id3', 'name3','male', 'descn3']];
       这段代码中中多了一个"，",这样才会出现这样的结果，所以大家一定要细心啊!

5.现在我们来做一个静态的树，即做一个Ext.tree.TreePanel的例子：
Html代码

>  

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>  
无标题文档
  
  
   
  
   
  
   
     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();
  
   

  以上是我们今天总结的一些知识点，如果以上的那个下载地址不行，可以到附件中去下载ext-2.0.1.zip.

标签:
Java培训
  
软件开发培训
  
编程培训
  
广州Java培训
  
程序员培训
  
Java软件开发
  
广州软件培训


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u3/97775/showart_2021334.html