ExtJS学习.pdfVIP

ExtJS 的学习曲线太陡峭了，这是看了文档和example 给我的感觉。 下面我介绍一下自己的学习路线及过程： 我学习ExtJS 的第一个example 是Window，因为我首先是被这个吸引住了，我照着 hello demo 用JS直接生成window，oK,很顺利的产生了一个窗体。源码如下： Javascript： Ext.onReady(function(){ var win = newExt.Window({ el:hello-win,//将此div 创建成窗体对象 layout:fit,//布局 width:500, height:300, closeAction:hide,//设置是否可以关闭 plain: true }); win.show(Ext.getBody());//在body 中渲染此窗体 }); 应该注意上面的el 属性，这个属性在以后的demo 中随处可见，因为它太重要了，因为它，我 们可以按照正常的方式做页面设计，然后借助这个属性可以用ExtJS 的样式属性来包装我们的 页面效果。此外注意窗体的show(container)方法，这个方法指定要在那里渲染这个窗体。 Html： div id=hello-windiv class=x-window-headerHello Dialog/div/div 注意我们创建了两个DIV，一个是用来创建窗体的，另外一个是创建窗体的标题栏的。 从这个 demo 可以看出，我们成功的创建了一个ExtJS 样式的窗体，这个窗体有标题，可以关 闭，可以自由的拖动，拖放。值得注意的是，我们是用自己的div 来创建的窗体。 我们先不管window 中是否存在内容，接下来我们创建一个简单的tab。 Tab在日常开发中我用的不多，在这里也介绍一下。 Javascript： Ext.onReady(function(){ //tabs createby div var tabs =new Ext.TabPanel({ applyTo:my-tabs, activeTab:0, deferredRender: false, autoTabs: true }); }); 注意这里的 applyTo 方法，这个方法就是将我们自己创建的 div 渲染成一个 tab，另外注意 autoTabs方法，它将会把我们的创建的id 为tabs 的div 的内部样式为x-tab的div 渲染成我们的 tab 项. activeTab：0 说明索引为0的tab 为当前活动的，deferredRender 我也不知道，也没看文档. Html: div id=tabs div class=x-tab title=The First Tab这里是TheFirst Tab 的内容区/div div class=x-tab title=The SecondTab这里是TheSecond Tab 的内容区/div /div 注意这里我们又是用了自己的div 下面我们把这个tab 放到我们先前创建的window 中去 Javascript： Ext.onReady(function(){ //tabs createby div var tabs =newExt.TabPanel({ applyTo: tabs, //这里将把我们自己创建的id 为tabs 的div 渲染成tabs activeTab:0, deferredRender: false, autoTabs: true }); var win =newExt.Window({ el:hello-win,//将此div 创建成窗体对象 contentEl: win-content,//窗体的内容区 layout:fit,//布局 width:500, height:300,