Ext.Viewport代表浏览器窗口的整个显示区域,将document body作为渲染对象,它会根据浏览器窗口的大小自动调整自身的尺寸。
在一个页面中只允许出现一个Viewport实例,没有提供对滚动条的支持。
- Ext.onReady(function(){
-
var accordion = new Ext.Panel({
-
title: "功能分组",
-
layout: "accordion",
- layoutConfig: {
-
animate: true
- },
- width: 250,
- minWidth: 100,
-
region: "west",
-
split: false,
-
collapsible: true,
- items: [
-
{title:"嵌套面板一", html:"嵌套面板一", iconCls:"save"},
-
{title:"嵌套面板二", html:"嵌套面板二", iconCls:"search"},
-
{title:"嵌套面板三", html:"嵌套面板三", iconCls:"back"}
- ]
- });
-
-
new Ext.Viewport({
-
title: "Viewport",
-
layout: "border",
- defaults: {
-
bodyStyle: "background-color: #FFFFFF;",
-
frame: true
- },
- items: [
- accordion,
-
{region:"north", height:100},
-
{region:"center"}
- ]
- });
- });
分享到:
相关推荐
Ext.Viewport、 Ext.TabPanel布局
使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系。 面板由一个工具栏、一个底部工具栏、面板头部、面板...
1.Ext Designer生成的代码,如何使用;通过实例化来使用。 2.Ext 的model,store,grid使用,...Ext.container.Viewport .... 希望能给初学者一点启示吧。 如果有不明白的请我QQ:243596252;时间允许我会帮助大家。。。
第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...
9.2.3 将body元素作为容器:ext.container.viewport / 435 9.3 面板 / 436 9.3.1 面板的结构 / 436 9.3.2 构件的放置:dockeditems / 438 9.3.3 面板标题栏构件:ext.panel.header与ext.panel.tool / 438 9.3.4...
extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...
那个深入浅出ext作者比我还懒 viewport存放Ext.panel对象,其容器中的成员可以以borderlayout方式布局
NULL 博文链接:https://kai2008.iteye.com/blog/350192
5.3 使用ViewPort 5.4 Ext.tab.Panel页签 5.5 本章小结 第6章 常用工具类与函数 6.1 非常有用的Ext.core.Element 6.2 Ext常用函数 6.2.1 Ext.onReady() 6.2.2 Ext.get() 6.2.3 Ext.select() 6.2.4 ...
44. Renamed <ext:ViewPort> to <ext:Viewport>. Change to lowercase "p". 45. Renamed <Body> inner property to <Content>. Affects all ContentPanel type controls including Panel, Window, Viewport ...
11.2.2 使用Viewport 11.2.3 实现表单元素横排 第12章 ExtJS对Ajax的支持 12.1 Ext.Ajax介绍 12.1.1 Ext.Ajax.request方法详解 12.1.2 Ext.Ajax.request操作示例 12.1.3 Ext.Ajax.request提交XML数据 12.2 ...
问题一个页面有两个面板,都...代码示例 代码如下:/// ”Ext/ext-all-debug-w-comments.js”> Ext.onReady(function () { var viewport = Ext.create(‘Ext.container.Viewport’, { layout: { type: ‘vbox’, al
一、Border布局由类Ext.layout.BorderLayout... 二、应用举例 代码如下: Ext.onReady(function(){ new Ext.Viewport({ layout:”border”, items:[{region:”north”, height:50, title:”顶部面板”}, {region:”south
11.2.2 使用Viewport 11.2.3 实现表单元素横排 第12章 ExtJS对Ajax的支持 12.1 Ext.Ajax介绍 12.1.1 Ext.Ajax.request方法详解 12.1.2 Ext.Ajax.request操作示例 12.1.3 Ext.Ajax.request提交XML数据 12.2 ...
使用EXTJS 开发的DEMO 含有Ext.container.Viewport 使用 使用EXTJS 封装JQUERY的插件 Ext.dashboard.Dashboard 看板布局使用 Ext.tree.Panel 树型控件使用 ACE代码编辑器 在EXTJS中的使用
看下面的代码: 代码如下:Ext.onReady(function(){ new Ext.Viewport({ layout:”border”, items:[{region:”north”, height:50, title:”顶部面板”}, {region:”south”, height:50, title:”底部面板”}, {...
大致看了几天的书籍 查阅了API。头脑里也记不下多少,学习还是动手比较好。就试着开始写写: 首先:开始搭个 界面... [removed][removed] [removed][removed] 定义一个Ext.Viewport: 在items的属性里设置: 头部: 代
1.入门 2.ext事件处理 3.面板 4.工具栏 5.Viewport 6.窗口 7.对话框 内附:ext语法总结.txt
'viewport > goodslistview': { afterrender: function(gp){//侦听goodslistview渲染 gp.down('button[action=testBtn1]').on('click',function(){ //侦听goodslistview工具条上action=testBtn1的按钮单击...