`

ExtJs学习--ViewPort练习

 
阅读更多

我现在是想要熟悉ExtJs的一些属性，然后在进行相关的应用

现在是学习viewport

我在网上查找了一些实例

并做了相关的练习

viewport.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Complex Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
	href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
	Ext.onReady(function() {
		new Ext.Viewport({
			enableTabScroll : true,//是否允许tab溢出时可以滚动
			layout : "border",//设置布局
			items : [ {//为面板添加组件
				title : "面板",//标题
				region : "north",//指定布局模块所在的位置
				height : 50,//高度
				html : "<h1>hi boy</h1>",//内部显示的文本
				bbar : [ {//底部工具栏，显示分页工具条
					text : "按钮一"//节点的文字
				}, {
					pressed : true,
					text : "按钮二"
				} ]
			}, {
				title : "菜单",
				region : "west",
				width : 200,
				collapsible : true,
				html : "菜单栏"
			}, {
				xtype : "tabpanel",
				region : "center",
				items : [ {
					title : "面板1"
				}, {
					title : "面板2"
				} ]
			} ]
		});
	});
</script>
</head>
<body>
</body>
</html>

 显示效果

 

 

  • 大小: 8.3 KB
分享到：
| TreePanel学习--AsyncTreeNode
评论
发表评论

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

相关推荐

    深入浅出EXTJS320-395

    深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320...

    extjs extjs-basex.js

    extjs-basex.js extjs-basex.js extjs-basex.js

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    extjs4-slate 主题

    ExtJS 4 Slate 主题是基于 Sencha ExtJS 4.0.7 框架的一个视觉风格，它提供了一种现代、扁平化的设计，增强了用户界面的吸引力和用户体验。Slate 主题是对默认主题的扩展，旨在为开发者提供一个更加专业且引人入胜的...

    深入浅出EXTJS241-320

    深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320

    ExtJS----HelloWorld程序源码

    在"ExtJS----HelloWorld程序源码"中，我们将会看到如何使用ExtJS来创建一个简单的“你好，世界！”应用。以下是对这个示例中涉及的主要知识点的详细解释： 1. **引入ExtJS库**：首先，你需要在HTML文件中引入ExtJS...

    extjs-620-docs.zip

    extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档

    extjs2----关于extjs 的使用，操作

    描述中提到内容较为初级，适合初学者学习，这表明我们将探讨的是ExtJS的基础概念和常用组件。 首先，让我们来了解一下ExtJS的核心概念。ExtJS基于组件模型，允许开发者构建复杂的用户界面，这些组件可以是按钮、...

    extjs4.2-2

    extjs4.2-2

    extJs-5.0.1-gpl（part1）

    extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包（分为32位和64位）和教程，一共四部分

    ExtJS--Windows.rar_extjs_extjs CSharp_extjs windows

    总的来说，这个"ExtJS--Windows.rar"包是一个学习和实践使用ExtJS构建Windows风格前端应用的好资源，涵盖了从组件使用、布局设计到数据交互等多个方面。对于希望提升前端技能，尤其是想要将Web应用设计得更具桌面...

    ExtJS4.0-API.rar

    ExtJS4.0-API Ext4.0-API Ext4 ExtJS4 API 学EXTJS4的好东西...

    Extjs--DWR做的动态树

    这篇博客文章"Extjs--DWR做的动态树"可能探讨了如何利用这两者结合来创建动态的树形数据结构，这种结构在很多Web应用中用于展示层次化的信息，比如文件系统、组织结构或导航菜单。 动态树在Web应用中是交互式的，...

    EXTJS3.2-3.3中文API和包

    EXTJS 3.2-3.3中文API文档是学习和开发EXTJS应用的重要参考资料。CHM（Compiled HTML Help）文件是一种Windows下的帮助文件格式，包含了大量的离线文档，可以帮助开发者快速查找和理解EXTJS的各种类、方法、属性和...

    Extjs之--图片浏览器

    1. **组件使用**：Ext JS的Grid、Panel、Viewport、Toolbar等组件可能会被用到，以构建图片列表、预览窗口、导航按钮等元素。 2. **数据绑定**：图片信息（如URL、名称、大小等）可能存储在一个数据源中，通过Ext JS...

    Extjs--OA 自动办公系统

    【Extjs--OA 自动办公系统】是一款基于ASP.NET技术和EXTJS前端框架开发的办公自动化系统，采用典型的三层架构设计，旨在提供高效、便捷的办公流程管理。此系统的实现涉及了多个关键知识点，下面将详细阐述这些技术...

    extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip

    通过深入学习和研究这个压缩包中的示例，开发者可以掌握ExtJS 4.1.0 MVC模式的精髓，了解如何组织和构建复杂的Web应用程序。这有助于提高开发效率，同时保证代码的可维护性和可扩展性。对于想要提升ExtJS技能的前端...

    Extjs6.2 生成的admin-dashboard官方模板

    Extjs6.2 生成的admin-dashboard官方模板

    Extjs4-学习指南

    ### Extjs4 学习指南知识点汇总 #### 1. Extjs初步 ##### 1.1 获取Extjs - **获取途径**：访问官方网站 http://extjs.org.cn/ 下载所需的 Extjs 发布包。 ##### 1.2 搭建学习环境 - **前提条件**：确保计算机上...

    语言程序设计资料：ExtJs学习笔记-2积分.doc

    语言程序设计资料：ExtJs学习笔记-2积分.doc

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