`

Ext JS 入门之panel,TabPanel的简单使用

EXTCSSJavaScript体育XHTML 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Panel</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link href="../extjs/ext-3.2.0/resources/css/ext-all.css" mce_href="extjs/ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/adapter/ext/ext-base.js" mce_src="extjs/ext-3.2.0/adapter/ext/ext-base.js"></mce:script> 
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/ext-all.js" mce_src="extjs/ext-3.2.0/ext-all.js"></mce:script> 
     
   <mce:script type="text/javascript"><!--  
   Ext.onReady(function()  
   {  
    var panel=new Ext.Panel  
    (  
    {  
    renderTo:"hello",  
    title:"hello",  
    width:300,  
    height:200,  
    html:'<h1>Welocome to http://blog.csdn.net.ws_hgo</h1>'  
    }  
    );  
    }  
    )  
    
     
// --></mce:script> 
</head> 
<body> 
<div id="hello"></div> 
 
</body> 
</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Panel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../extjs/ext-3.2.0/resources/css/ext-all.css" mce_href="extjs/ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/adapter/ext/ext-base.js" mce_src="extjs/ext-3.2.0/adapter/ext/ext-base.js"></mce:script>
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/ext-all.js" mce_src="extjs/ext-3.2.0/ext-all.js"></mce:script>
  
   <mce:script type="text/javascript"><!--
   Ext.onReady(function()
   {
    var panel=new Ext.Panel
    (
    {
    renderTo:"hello",
    title:"hello",
    width:300,
    height:200,
    html:'<h1>Welocome to http://blog.csdn.net.ws_hgo</h1>'
    }
    );
    }
    )
 
  
// --></mce:script>
</head>
<body>
<div id="hello"></div>
</body>
</html>
 
view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>TabPanel</title> 
        <link href="../extjs/ext-3.2.0/resources/css/ext-all.css" mce_href="extjs/ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/adapter/ext/ext-base.js" mce_src="extjs/ext-3.2.0/adapter/ext/ext-base.js"></mce:script> 
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/ext-all.js" mce_src="extjs/ext-3.2.0/ext-all.js"></mce:script> 
     
   <mce:script type="text/javascript"><!--  
   Ext.onReady(function()  
   {      
      var tabpanel=new Ext.TabPanel  
      (  
      {  
        width:300,  
        height:200,  
        activeTab:0,//默认显示第一个panel的内容  
        enableTablScroll:true,  
        items:[  
               {title:'娱乐',height:30,html:'这里是娱乐新闻版块'},  
               {title:'体育',height:30,html:'这里是体育新闻版块'},  
               {title:'科技',height:30,html:'这里是科技新闻的版块'}  
              ]  
       }  
       );  
       tabpanel.render("tab");//填充到id为tab的区域  
   }  
   )  
     
// --></mce:script> 
</head> 
<body> 
<div id="tab"></div> 
</body> 
</html> 
分享到：
| C编写的词法分析器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    精通JS脚本之ExtJS框架.part1.rar

    第1章 JavaScript入门必备 1.1 JavaScript语言概述 1.1.1 JavaScript简介 1.1.2 JavaScript特点 1.1.3 JavaScript与Java 1.2 第一个JavaScript程序 1.2.1 嵌入JavaScript 1.2.2 链接外部JavaScript文件 ...

    Ext+JS深入浅出

    - **核心组件**：EXTJS 包含了一系列核心组件，如 `Ext.Component`、`Ext.BoxComponent`、`Ext.Container`、`Ext.Panel` 和 `Ext.TabPanel` 等，这些组件构成了 EXTJS 用户界面的基础。 **表格控件**：表格控件 (`...

    ext-word文档

    extend: 'Ext.grid.Panel', ... }); ``` #### EXT的布局（Layout） 布局是ExtJS中用于管理UI组件排列的关键特性。ExtJS提供了多种布局策略，如`fit`、`vbox`、`hbox`等，可以根据需要选择合适的布局策略。 #### ...

    精通JS脚本之ExtJS框架.part2.rar

    第1章 JavaScript入门必备 1.1 JavaScript语言概述 1.1.1 JavaScript简介 1.1.2 JavaScript特点 1.1.3 JavaScript与Java 1.2 第一个JavaScript程序 1.2.1 嵌入JavaScript 1.2.2 链接外部JavaScript文件 ...

    ExtJS4.2入门教程

    &lt;script type="text/javascript" src="js/ext-all.js"&gt; &lt;script type="text/javascript" src="js/Ext.Base.js"&gt; ``` #### 二、基础示例 **2.1 HelloWorld示例** HelloWorld是编程语言中最经典的入门示例之一，其...

    extjs入门案例大全

    接着，我们看一个简单的Panel案例。EXTJS的Panel是基本的容器组件，可以包含其他组件： ```javascript Ext.onReady(function() { new Ext.Panel({ renderTo: "hello", title: "第一个", width: 300, height: ...

    ExtJS实用开发手册-快速入门

    var panel = new Ext.TabPanel({ width: 300, height: 200, items: [ { title: "面板1", height: 30 }, { title: "面板2", height: 30 } ] }); ``` - **渲染组件**：`render`方法后面的参数表示页面上的...

    EXT 中文手册

    - **核心组件**：Element是EXT中最基础也是最重要的组件之一，它负责DOM操作和管理。 - **功能**：支持对DOM元素进行增删查改等操作，同时也支持绑定事件监听器等功能。 - **使用方法**：通过Element可以方便地获取...

    ExtJS快速入门指南.pdf

    最后，如何学习及掌握Ext部分给出了学习ExtJS框架的资源和建议，帮助开发者从入门到熟练使用ExtJS。 通过以上内容的介绍，ExtJS快速入门指南为初学者提供了从基础到进阶的全面指导，帮助开发者有效地使用ExtJS框架...

    extjs6.5快速开始.pdf

    - **示例应用程序**: 使用Ext JS的现代工具包实现简单的“Hello World”应用程序。 **Hello World应用示例** - **代码示例**: 提供了一个简单的“Hello World”程序代码。 - **运行效果**: 单击“Run”按钮可以看到...

    ExtJs入门实例

    var tabPanel = new Ext.TabPanel({ title: '选项卡面板', activeTab: 0, items: [ { title: '选项卡1', html: '这是选项卡1的内容' }, { title: '选项卡2', html: '这是选项卡2的内容' } ] }); tabPanel....

    老师整理的extjs学习笔记

    下面是一个简单的 `Ext.Panel` 示例： ```javascript new Ext.Panel({ title: 'Example Panel', width: 400, height: 200, layout: 'fit', renderTo: Ext.getBody(), items: [ { xtype: 'button', text: '...

Magicbox
Global site tag (gtag.js) - Google Analytics