Ext.onReady(function() {
new Ext.Panel({
renderTo:Ext.getBody(),
title:'面板头部header',
width:500,
height:600,
html:'<h1>面板主区域</h1>',
tbar:[{
pressed:true,
text:'刷新'
}],
bbar:[{
text:'底部工具栏bottomToolbar'
}],
buttons:[{
text:'按钮位于footer'
}]
})
new Ext.Viewport({//可视区域的特殊容器（浏览器可视区域）
//renderTo : Ext.getBody(),//可以不要
enableTabScroll : true,
layout : 'fit',// 自适应布局方式
items : [{
title : '面板',
html : '',
bbar : [{
text : '按钮1',
pressed:true
}, {
text : '按钮2',
pressed:true
}]
}]
})
})
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<%
request.setAttribute("base", request.getContextPath());
%>
<html>
<head>
<title>面板</title>
<link rel="stylesheet" type="text/css"
href="${base}/script/ext/resources/css/ext-all.css">
<script type="text/javascript"
src="${base}/script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${base}/script/ext/ext-all.js"></script>
<script type="text/javascript" src="${base}/script/sample/third.js"></script>
</head>
<body>
</body>
</html>
分享到：
相关推荐
那个深入浅出ext作者比我还懒 viewport存放Ext.panel对象,其容器中的成员可以以borderlayout方式布局
使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展的，或者他会与其他控件之间有关系。 面板由一个工具栏、一个底部工具栏、面板头部、面板...
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 ...
第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第十二讲.ExtJS之Ext常用函数 第十三讲.ExtJS之Ext常用函数（二） 第十四讲.初识Ajax 第十五讲.ExtJS对Ajax支持-注册用户实例 第十六讲.ExtJS对Ajax...
11、ExtJS布局模式-Box布局、使用ViewPort布局首页0 j( d' o {. g$ T 12、ExtJS之Ext常用函数4 {, o8 W1 s! I6 ^3 k 13、ExtJS之Ext常用函数（二）' o, e2 G$ D7 @" ?- [! E 14、初识Ajax& i O, A2 I, c6 G: c- Q) K...
3、通过实现角色管理、用户管理、部门管理三个基础的功能模块，演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法，以及border、column、form、fit、accordion、hbox等常用布局方式；...
第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...
4、通过实现角色管理、用户管理两个基础的功能模块，演示了Viewport、Container、Panel、TreePanel、Grid、Window、Form等常用组件的用法，以及border、column、form、fit、hbox等常用布局方式； 5、通过自定义一个...
1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1 ext designer / 18 1.4.2 在visual studio中实现智能提示 / 23 1.4.3 spket / 28 1.4.4 在eclipse中实现智能提示 / 32 1.5 如何获得帮助 / 32 1.6 本...
使用EXTJS 开发的DEMO 含有Ext.container.Viewport 使用 使用EXTJS 封装JQUERY的插件 Ext.dashboard.Dashboard 看板布局使用 Ext.tree.Panel 树型控件使用 ACE代码编辑器 在EXTJS中的使用
5.1.5 Ext.Panel 5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext....
5.1.5 Ext.Panel 5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext....
三、组件配置选项介绍 103 四、完整源代码 107 五、小结 112 第十七章：悬停提示与验证 113 一、悬停提示 113 二、悬停提示的用法 114 三、表单组件验证 118 四、小结 120 第十八章：FormPanel布局与初始化 121 一、...
……19 3.3 视图区ViewPort……………………………………………………………………………………………….…….19 第四章 窗口Window及对话框MessageBox………………………………………………………….………....
-增加示例(iframe/parent_postback_run3.aspx)，如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性，增加CollapseMode, ...
-这样所有需要占据全屏的Panel（不管你是Accordion,Panel,ContentPanel,Form,GroupPanel,SimpleForm,Tree还是Grid,TabStrip）都可以通过这种方式全屏。 -简单方便，示例可以参考 default.aspx 或者 other\...
七、ViewPort....................................................................................................................... 16 八、窗口Window......................................................