ExtJs 中Viewport的介绍与使用
来源:互联网 发布:网络男主播招聘 编辑:程序博客网 时间:2024/04/30 22:19
ExtJs 中Viewport的介绍与使用
VeiwPort 代表整个浏览器显示区域,该对象渲染到页面的body 区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort 实例。Viewport 不需要再指定renderTo,而我们也看到Viewport 确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改改。Viewport 主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport 上常用的布局有fit、border 等,当然在需要的时候其它布局也会常用。
举例1如下:
<script type="text/javascript"><!-- Ext.onReady(function(){ var vport = newExt.Viewport({ enableTabScroll:true, layout:"fit",//采用fit布局 items:[ { title:"面板的标题", html:"面板中的主体内容部分", bbar:[ {text:"按钮1"}, {text:"按钮2"}] }] }); });//--></script>
效果如下:
举例2:
<script type="text/javascript"><!-- Ext.onReady(function(){ var vport = newExt.Viewport({ enableTabScroll:true, layout:"border",//采用border布局 items:[ { region:"north", height:80, title:"面板的标题(上部分)", html:"<h1>新闻后台管理系统</h1>" }, { region:"west", width:120, title:"面板的标题(左部分)", html:"<h1>连接部分</h1>" }, { xtype:"tabpanel",//面板的类型 region:"center", html:"<h1>显示操作部分</h1>", items:[ {title:"新闻管理"}, {title:"用户管理"} ] } ] }); });//--></script>
效果如下:
备注:xtype一栏操作
- ExtJs 中Viewport的介绍与使用
- ExtJs 中Viewport的介绍与使用
- ExtJS ViewPort的使用
- meta中viewport的使用
- 关于meta中viewport的用法介绍
- ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- ExtJS梦想之旅(五)--Viewport的使用
- extjs mvc模式中Viewport加载方式
- extJs中一个viewport中, 使用一个请求, 同时显示两个gridPanel
- 【原创】ExtJs 关闭Viewport 里的 item
- viewport的使用
- viewport的使用
- meta viewport的使用
- ExtJS学习笔记(六) 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- ExtJs学习笔记基础篇(3)-面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- ExtJs学习笔记基础篇(3)-面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- Extjs中常用表单介绍与应用
- 我学习css看的第一篇文章 (强烈推荐,适合新手学习)
- Spring 中配置dwr ajax
- 关于python源代码中中文问题
- IE7、IE8、IE9、IE10后各版本的更新及差别
- linux开课
- ExtJs 中Viewport的介绍与使用
- Learning ImageMagick 4: 批处理
- jQuery入门学习总结
- struts2 拦截器的详解
- Twitter Storm的一些关键概念
- 5 什么是经典
- 我的第一篇
- C傻瓜式模板文件生成
- 时钟——高尔基