ExtJS起步 2012-1-19

最新推荐文章于 2024-09-12 15:09:42 发布

fulei_master

最新推荐文章于 2024-09-12 15:09:42 发布

阅读量754

点赞数

分类专栏： ExtJS 入门文章标签： extjs stylesheet function html layout tree

本文链接：https://blog.csdn.net/fulei_master/article/details/7211484

版权

ExtJS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

入门

1 篇文章 0 订阅

订阅专栏

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>

    
    <link rel="stylesheet" type="text/css" href="ext-3.4.0/ext-3.4.0/resources/css/ext-all.css" />
    
    <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>
    
    <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>