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

最新推荐文章于 2022-12-08 13:42:32 发布
最新推荐文章于 2022-12-08 13:42:32 发布
阅读量248 收藏
点赞数
分类专栏： ExtJs 文章标签： EXT CSS JavaScript 体育 XHTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/szz0429/article/details/83732845
版权
<!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> 
szz0429
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DotNet+Ext入门
09-15
【 DotNet + Ext 入门 】 在 IT 领域，DotNet 是微软公司推出的一种全面的开发框架，用于构建各种类型的应用程序，而 Ext 是一个基于 JavaScript 的富客户端框架，尤其在创建桌面级 Web 应用时非常强大。本篇文章...
精通JS脚本之ExtJS框架.part1.rar
03-02
第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入门：TabPanel组件（八）
weixin_30239339的博客
09-05 209
一：TabPanel组件简介 二：简单代码示例 三：使用iframe作为tab的标签页内容 四：动态添加tabpanel的标签页 五：为tabpanel标签页添加右键菜单 方式一： <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>&l...
Ext JS 学习(2) Ext.Panel 组件的使用
lvjian700的博客
10-29 2263
 今天介绍extjs中的Panel组件。//html代码div id="container">    /div> //js代码var p = new Ext.Panel({        title: My Panel,//标题        collapsible:true,//右上角上的那个收缩按钮，设为false则不显示        renderTo: contain
Ext Js入门第10篇-使用Ext.container.Viewpost整体布局
qq_29258777的博客
05-26 339
Ext.container.Viewport是一款非常常用的布局容器，它会自动把自己输出到HTMl页面，而且在页面的上中下左右中5个布局 Ext.onReady(function() { //创建一个TreeStore，TreeStore负责为Tree提供数据 var store=Ext.create('Ext.data.TreeStore',
ExtJs2.0学习系列(2)Ext.Panel
s13596191285的博客
12-08 443
今天介绍extjs中的Panel组件。 //html代码 <div id="container"> </div> //js代码 var p = new Ext.Panel({ title: 'My Panel',//标题 collapsible:true,//右上角上的那个收缩按钮，设为false则不显示 renderTo: 'container',//这个panel显示在html中id为container的层中
Extjs初学入门，详细panel、form、grid等介绍
heboy19的博客
08-19 4628
layout 1.面板     (1)类结构         Ext.Base         Ext.AbstractComponent             Ext.Component                 Ext.container.AbstractContainer                     Ext.container.Container   
Ext.js入门：面板（五）
weixin_30338461的博客
09-04 71
一：Ext.Panel类简介 二：Ext.Panel类常用属性方法与事件 三：Ext.Panel实例运用 1.Ext.Panel类简介 类 Ext.Panel 包： Ext 定义的文件： Panel.js 类全称： Ext.Panel 继承自于： Ext.Container 说明：面板是一种面向用户界面构建应用程序最佳的单元块，一种特定功能和结构化...
ExtJS 入门学习之 window与panel篇
java-he
07-06 241
   extjs的语法很像java，对于这些组件的使用基本都是面向对象的。今天这部分内容，和swing 非常相似。现亮一个window给大家看看： &lt;! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" &gt; ...
ExtJs2.0学习系列(2)--Ext.Panel
kkwant的博客
08-04 1995
上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ，受到了大家的褒贬不一，还是有的朋友提出好的建议，在此表示感谢！今天介绍extjs中的Panel组件。 // html代
Ext.js入门：Window对象与FormPanel（六）
weixin_30852419的博客
09-04 204
一：Ext.Window类 二：Ext.Window类实例 三：Ext.FormPanel类 四：Ext.FormPanel类实例 1.类Ext.Window 包： Ext 定义的文件 Window.js 类全称： Ext.Window 继承自于： Ext.Panel 说明： 一种专用于程序中的“视窗”（window）的特殊面板。Window默认下是可拖动的draggabl...
精通JS脚本之ExtJS框架.part2.rar
03-02
第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深入浅出
01-15
- **核心组件**：EXTJS 包含了一系列核心组件，如 `Ext.Component`、`Ext.BoxComponent`、`Ext.Container`、`Ext.Panel` 和 `Ext.TabPanel` 等，这些组件构成了 EXTJS 用户界面的基础。 **表格控件**：表格控件 (`...
ext-word文档
06-15
extend: 'Ext.grid.Panel', ... }); ``` #### EXT的布局（Layout） 布局是ExtJS中用于管理UI组件排列的关键特性。ExtJS提供了多种布局策略，如`fit`、`vbox`、`hbox`等，可以根据需要选择合适的布局策略。 #### ...
【创新未发表】Matlab实现秃鹰优化算法BES-Kmean-Transformer-LSTM组合状态识别算法研究.rar
最新发布
07-29
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
巡检python.mp4
07-29
巡检python.mp4
三个版本企业数字化转型合集（2001-2022）（全新整理)
07-29
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/140383422 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 ## 数据指标说明 整理了基本上最常见的数字化转型的度量方式，全部都是目前为止最为常用的顶刊数据用法，具体数据说明如下（全部为2021最新版本） 一、吴非版本（2007-2021） 二、袁淳版本（2007-2021）（数据丰富） 三、张永珅版本 2001-2022
【SCI一区】Matlab实现蝗虫优化算法GOA-CNN-LSTM-Attention的风电功率预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
ExtJS入门与实践：丰富的Web前端开发框架
ExtJS快速入门是一份针对初学者的实用教程，它深入浅出地介绍了ExtJS框架及其在Web开发中的应用。ExtJS是由Jack Slocum开发的一个基于JavaScript的开源AJAX框架，主要目标是帮助开发者构建富互联网应用（RIA）。这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值