ExtJS起步 2012-1-19

1、 ExtJSp下载

http://www.sencha.com/products/extjs/

 

2、学习ExtJS要诀

熟悉JS语法：IDE当前还不能很好联想变量函数关系，需要你自己的代码清晰才行。

熟悉EXt语法风格：那些充满了中括号，方括号的代码。以及层层叠叠的代码风格需要熟悉，否则会昏头

从DEMO做起：对每个控件，使用最简单的例子尝试，然后自己修改组合

书籍：《深入浅出ExtJS》

工具：Extbuilder http://code.google.com/p/extbuilder/wiki/UserGuide （下载压缩包->以Archive方式安装->安装GEF->设置extjs路径->开始新建[参考web readme]）

 

3、简单页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
    <title>Extjs 2.0 Example Test</title>
 
    <!-- 调用ExtJS样式 -->  
    <link rel="stylesheet" type="text/css" href="ext-3.4.0/ext-3.4.0/resources/css/ext-all.css" />  
    <!-- 调用ExtJS的脚本文件，当前指定的是所有脚本-->  
    <script type="text/javascript" src="ext-3.4.0/ext-3.4.0/adapter/ext/ext-base.js"></script>  
    <script type="text/javascript" src="ext-3.4.0/ext-3.4.0/ext-all-debug.js"></script>  
 <script type="text/javascript" src="ext-3.4.0/ext-3.4.0/src/locale/ext-lang-zh_CN.js"></script>  
    <!-- ִ执行Test1，也就是上面的文件-->  
    <script type="text/javascript">  
      Ext.onReady(function(){  
   //我的视图 myview
  
  
  var root=new Ext.tree.TreeNode({
  id:"root",
  text:"tree root"});
  root.appendChild(new Ext.tree.TreeNode({
  id:"c1",
  text:"sub node"
  }));
  var mytree=new Ext.tree.TreePanel({
  title:"tree show",
  root:root,
  width:100
  });
  
  var mycolumn = new Ext.Panel({
  title:"colume show",
  layout:"column",
  width:500,
  height:100,
  items:[{title:"column 1",Width:150},
  {title:"column 2",columnWidth:.3},
  {title:"column 3",columnWidth:.3},
  {title:"column 4"}
  ]
  }) ;

   new Ext.Panel({
   renderTo:"myview",
   title:"total panel",
   //width:500,
   height:200,
   layout:"accordion",
   layoutConfig: {
   animate: true
   },
   items: [mytree,
     mycolumn,
     {title:"normal text",html:"zzzzzzz"}
   ] }
  ); 
  
   function hahaha()
   {
   Ext.MessageBox.alert('某某某','你好!');  
   }
  
   //按钮
        var button = new Ext.Button({text:'hello world!',width:'500px',renderTo:'extButton',handler:hahaha});  
        //button.disable();  
        Ext.MessageBox.alert('Hello','World啊啊!');  
  
      });  
    </script>  
  </head>  
  <body>  
    <div id="myview"></div>  
 <div id="extButton"></div> 
    This is body. 原始的body
  </body>  
</html>