Ext简单示例

简介: Ext简单示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Ext简单demo示例</title>
     <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">  
     <script type="text/javascript"  src="ExtJS/adapter/ext/ext-base.js" ></script>  
     <script type="text/javascript"  src="ExtJS/ext-all.js" ></script>
     <script>
     Ext.onReady(function(){
     var tabs = new Ext.TabPanel({
     //applyTo: 'tabs', //这里将把我们自己创建的id 为tabs 的div 渲染成tabs
     activeTab: 0,
     deferredRender: false,
     autoTabs: true,
     items: [{
         title: 'Tab 1',
         html: 'A simple tab',
         closable: true,
          listeners: {
                 'beforeclose':conrirmTab
             }
     },{
         title: 'Tab 2',
         html: 'Another one',
         closable: true,
         listeners: {
                 'beforeclose':conrirmTab
             }
     }]
     });
     var win = new Ext.Window({
     title:'Ext简单demo示例',
     el:'content',//将此div 创建成窗体对象
     layout:'fit',//布局
     width:500,
     height:300,
     closeAction:'hide',//设置是否可以关闭
     plain: true,
     draggable:false,
     maximizable:true,
     minimizable:true,
     modal:false,
     onEsc:function aa(){
         Ext.Msg.alert('aaa');
     },
     resizable:false,
     collapsible:true,
     plain:true,
     items:tabs
     });
     function conrirmTab(e){
         Ext.Msg.confirm('操作确认','操作确认',
             function(btn,text){
                 if(btn=='yes'){
                 tabs.remove(e);
             }
             });
         return false;
     }
     win.show(Ext.getBody());//在body 中渲染此窗体
     });
     </script>
 </head>
 <body>
 <div id="content">
 </div>
 </body>
 </html>
相关文章
|
Web App开发 JavaScript 前端开发
|
Web App开发 前端开发 JavaScript
|
JavaScript 开发者 API
Ext 4 概述(二)之Ext Core
Ext Core 新型类系统 参考资源 Ext JS 4的倒数:动态加载和新的类机制(上) Ext JS 4的倒数:动态加载和新的类机制(下) Ext JS 4 的类机制主要围绕传统OO模型而设计,弥补了Prototype OO不足。
698 0
|
前端开发 JavaScript
Ext 4 概述(一)
For both extjs and ext core Ext 4概述 Summary: Ext4概述 Author: Brian Moeskau (译者Frank Cheung ) Published: 2011年三月二十九号 Ext Version: Ext 4.x Languages: Chinese   Ext 4有志诚成为Web程序其革命性的开发平台。
724 0
|
JavaScript
Ext中的get、getDom、getCmp、getBody、getDoc的区别
Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等,在使用中要注意区别使用。 1、get方法 get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象,Ext.Element类是Ext对DOM的封装,代表DOM的元素,可以为每一个DOM创建一个对应的Element对象,可以通过Element对象上的方法来实现
1027 0