`
san_liuhongbin
  • 浏览: 20373 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

Ext viewport 学习

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

的定义 对Ext.Viewport的layout 会有影响.

 

code:HTML/JSP代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Tabs Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->


    <script type="text/javascript" src="../../ext-all.js"></script>
	<script type="text/javascript">
	 var viewport = new Ext.Viewport({
            layout:'border',
            items:[
                {
                    region:'center',
                    contentEl: 'rightDiv',
                    split:true,
                    margins:'0 0 0 0',
										collapsible : false,
										titlebar: false,
                    animate: true
                },{
                    region:'west',
                    contentEl: 'leftDiv',
                    split:true,
                    width: 500,
										//height: 500,
                    //minSize: 500,
                    //maxSize: 500,
                    //margins:'0 0 0 0',
										titlebar: false,
										collapsible: false
                }]
     });
     </script>
     </head>
     <body>
     		<div id='leftDiv' >
				</div>
				
				<div id='rightDiv'>
					
				</div>
     </body>
     </html>

 

DTD 头  会影响viewport的正常渲染.

 

solution:

1.更换:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 

2.直接移除.

 

 

2
4
分享到:
评论
2 楼 Rooock 2009-05-07  
嗯...是会报ext.fly为空.
要在 Ext.onReady(function(){
      new Ext.Viewport({ 
               ....
      )};
});
就好了.
1 楼 wangzhongjie 2008-08-19  
例子不好使,报ext.fly为空

相关推荐

    ext4.2学习之路

    ### ext4.2学习之路:深入理解Ext JS 4.2框架 #### 一、Ext JS 4.2概述 Ext JS是一款强大的企业级富客户端Web应用程序开发框架,基于JavaScript和HTML5技术,用于构建高性能的桌面和移动Web应用程序。Ext JS 4.2...

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系。 面板由一个工具栏、一个底部工具栏、面板头部、面板...

    Ext2.0的学习笔记

    Ext2.0的学习笔记不仅涵盖了Ajax的基本概念和应用,还深入探讨了如何利用Ajax技术与远程服务器进行数据交换,以及如何使用`ViewPort`来优化Web应用的布局和响应性。掌握这些知识对于开发高性能、高用户体验的Web应用...

    SSH和Ext整合 更新

    模拟登录界面,加入验证码,xml树的实现 Ext viewport框架 等好多东西,都是自己在学习ext中想到什么就做个例子,只是有点乱,共同研究共同进步 在javascript目录下加入Ext2.0 在lib下加入所需要的jar 数据库是...

    Ext 开发指南 学习资料

    6.2. ViewPort对整个窗口布局 6.3. 脑袋上有几个标签的tabPanel 6.4. 让布局复杂一点儿 6.5. 向诸位介绍一下各具特色的布局 6.5.1. accordion就是QQ那样的伸缩菜单 6.5.2. CardLayout?其实就是Wizard啦。 6.5.3. 呼...

    Ext3.0最经典的学习教程.pdf

    ### Ext3.0 最经典的学习教程 #### 一、引言 Ext3.0是一款流行的JavaScript库,主要用于构建Ajax驱动的交互式Web应用程序。这款框架以其丰富的组件集合、灵活的布局选项以及强大的功能而闻名。《Ext3.0最经典的学习...

    Ext开发文档(入门)

    EXT的开发文档是学习EXT的重要资源,它包含了详细的API参考、教程和示例。以下是一些关键部分: 1. **API参考**: API参考文档列出了EXT的所有类、方法、属性和事件。通过查阅API,可以了解如何使用特定的组件和功能...

    ext学习资料

    Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ title: 'HelloExt', html: 'Hello! Welcome to ExtJS.' }] }); } }); ``` 2. **创建HelloWorld.html文件**:同样在`WebRoot`目录下...

    ssh-orcale-ext基础学习

    ssh-orcale-ext 实现ext的分页,grid的编辑并异步保存...以及viewport等一些ext的基础知识,算是学了两个星期的小结吧。 对新手应该会有帮助。一个完整的工程, 带有.sql文件,导入表和数据,修改数据库连接就能运行。

    ext学习之路

    ### ext学习之路:深入解析ExtJS 4.20的核心组件与应用 #### 构建与源码(build & source) 在深入探索ExtJS 4.20之前,理解其构建方式与源码结构至关重要。ExtJS的构建过程通常涉及将源代码编译成适合生产环境的...

    Ext4.0使用指南

    Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ title: 'Hello Ext', html : 'Hello! Welcome to Ext JS.' }] }); } }); ``` - 创建helloworld.html,引入必要的CSS和JavaScript文件...

    Ext组件说明 Ext组件概述

    ### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架,用于构建桌面级Web应用程序...对于初学者来说,逐步学习并实践每个组件的特性和用法,是成为一个合格的Ext开发者的关键步骤。

    EXT dojochina Ext类别名.rar

    2. **层级结构**:类名中体现组件的层级关系,如`Ext.container.Viewport`表示视口容器。 3. **功能描述**:类名会包含组件的主要功能,如`Ext.toolbar.Toolbar`表示工具栏。 4. **继承关系**:EXT类名有时会体现出...

    Ext MVC 项目示例

    通过`Ext.container.Viewport`或`Ext.Component`创建视图,并通过数据绑定将模型数据呈现到界面上。 3. **控制器(Controller)**: 控制器作为模型和视图之间的纽带,处理用户交互,更新模型数据,以及管理视图的...

    ext java登录案例

    在本文中,我们将深入探讨如何使用EXT Java技术创建一个登录案例。EXT Java是一个强大的JavaScript库,专门用于构建富客户端Web应用程序...通过不断实践和学习EXT Java,你可以创建出更复杂、功能更丰富的Web应用程序。

    springMVC整合ext4js

    至于提供的文件,"Ext4js整合springMVC生成添加表单.docx"可能包含了关于如何使用Ext4JS创建添加表单的详细步骤和示例代码,而"ext4js_springMVC添加表单.rar"可能是一个包含示例项目的压缩包,供开发者参考和学习。...

    Ext4.0教程

    1. **创建Hello World应用**:在WebRoot目录下建立一个名为`helloworld.js`的文件,输入Ext4.0的`application`配置代码,定义应用名称和启动函数,创建一个带有标题和内容的`Viewport`容器。 2. **HTML结构**:创建`...

    ExtJs_Viewport_Example

    1. **配置Viewport**:通过`Ext.application`方法的`views`配置项或`viewport`配置项指定Viewport类。 2. **自适应布局**:利用ExtJS的布局管理器,如`fit`布局或`border`布局,使内容自动适应Viewport的大小。 3....

Global site tag (gtag.js) - Google Analytics