ExtJS 学习日记<1>

iomo

1、一般都要加载三个文件    ext-all.css    ext-all.js    ext-base.js2、一般情况下每一个用户的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)