ExtJS 学习日记<1>

1、一般都要加载三个文件
    ext-all.css
    ext-all.js
    ext-base.js
2、一般情况下每一个用户的ExtJS 都是从Ext.onReady();开始
3、组件的使用
   new Ext.Window();就可以创建一个窗口
   new Ext.GridPanel()就可以创建一个表格
   var panel = new Ext.Panel

({title:"hello",width:300,height:200,html:"Hell,easyif open source"});
   panel.render("hello");
       //render方法后面的参数表示页面上的div元素id,也可以直接在参数中通

过renderTo参数来省略用render
         方法，只需要在构造函数的参数中添加一个renderTo属性即可
  New Ext.Panel

({renderTo:"hello",width:300,height:200,html:"Hello,easyif open 

source"});
4、addListener 方法代码中，第一个参数表示时间名称，第二个参数表示事件处

理器或整个响应函数
        <script type="text/javascript">
           function a(){
              alert('some thing');
           }
        Ext.onReady(function(){
              Ext.get(btnAlert).addListener("click",a);
           });
        </script>
<input id="btnAlert" type="button" value="aler框" />
5、一个事件添加多个响应函数
        <script type="text/javascript">
           function a(){
              alert('some thing');
           }
        Ext.onReady(function(){
            Ext.get("btnAlert").on("click",a);
            Ext.get("btnalert").on("click",a);
           });
        </script>
<input id="btnAlert" type="button" value="aler框" />
6、ExtJS还支持事件延迟处理或时间缓存
        <script type="text/javascript">
           function a(){
              alert('some thing');
           }
        Ext.onReady(function(){
            Ext.get("btnAlert").on("click",a,this,{delay:2000});
           });
        </script>
<input id="btnAlert" type="button" value="aler框" />
7、一个页面中只能有一个ViewPort实例
        <script type="text/javascript">
             Ext.onReady(function(){
                 new Ext.Viewport({
                    enableTabScroll:true,
                    layout:"fit",
                    items:[{title:"面板",
                            html:"",
                            bbar:[{text:"按纽1"},
                            {text:"按纽2"}]
                            }]
                 });
             });
        </script>
8、Viewport常用的border布局
        <script type="text/javascript">
             Ext.onReady(function(){
                 new Ext.Viewport({
                    enableTabScroll:true,
                    layout:"border",
                    items:[{title:"面板",
                            region:"north",
                            height:50,
                            html:"网站后台管理系统"},
                           {title:"菜单",
                            region:"west",
                            width:200,
                            collapsible:true,
                            html:"菜单栏"},
                           {xtype:"tabpanel",
                            region:"center",
                            items:[{title:"面板1"},{title:"面板2"}]
                            }
                          ]
                 });
             });
        </script>

 (来源：http://www.iomo.cn)