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

通过此文能学习到如下内容
1.创建一个简单的面板 Ext.Panel
2.制作一个可以拖动的面板 Ext.Panel
3 .使用选项卡面板
3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容)
面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展的，或者他会与其他控件之间有关系。
面板由一个工具栏、一个底部工具栏、面板头部、面板尾部和面板主区域几个部分组成。面本类中还提供了面板展开、关闭等功能。并提供了一些可重用的工具按钮让我们灵活的控制面板。面板可以放入其他任何容器中，面板本身也是一个容器，所以面板里面也可以包含其他组件。面板的类名为Ext.Panel,其xtype为panel。
看下面一个例子来显示出面板的各个组成部分：
//普通的面板
function panel(){
var panel=new Ext.Panel({
renderTo:'panel',
title:'面板的头部',
width:400,
height:200,
html:'<h1>面板的主显示区域..可包含任何html代码</h1>',
tbar:[{text:'顶部工具栏按钮'}],
bbar:[{text:'底部工具栏'}],
buttons:[
{
text:'面板底部按钮',
handler:function()
{
Ext.Msg.alert('提示','面板底部按钮的事件！');
}
}
]
});
}
上面的代码就不做详细介绍了，特别注意的一点是renderTo:'panel'，这句代码负责把面板绑定到一个div层里，panel就是div的ID。
<div id="panel"></div>
代码执行后会显示下面的效果：

效果不错吧！面板中可以有多个工具栏，可以位于面板的顶部或底部，Ext工具栏是由Ext.Toolbar类表示。工具栏可以存放按钮、文本等内容。而且面板中还提了一些实用的工具栏，可以通过tools配置属性向面板头部加入工具栏选项，看下面的案例：
function panel(){
var panel=new Ext.Panel({
tools:[
{id:"save"},
{id:"help"},
{id:"up"},
{
id:"close",
handler:function(){
Ext.MessageBox.alert("工具栏按钮","工具栏的关闭按钮事件")
}
}
],
renderTo:'panel',
title:'面板的头部',
width:400,
height:200,
html:'<h1>面板的主显示区域..可包含任何html代码</h1>',
tbar:[{text:'顶部工具栏按钮'}],
bbar:[{text:'底部工具栏'}],
buttons:[
{
text:'面板底部按钮',
handler:function()
{
Ext.Msg.alert('提示','面板底部按钮的事件！');
}
}
]
});
}

当前1/3页 123下一页阅读全文

赞 (0)

相关推荐

  • 自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取.如iphone6的phys.width为750px,而css-width为375px. 二.明白一个浏览器默认行为. 试

  • 关于viewport,Ext.panel和Ext.form.panel的关系

    Ext.panel 可以存放很多元素,最常见的是Ext.form.formPanel对象,也可以用borderlayout布局 下面是我写的一个小例子,顶级容器不是viewport而是tabpanel 复制代码 代码如下: //一个普通的表单 var frm = new Ext.form.FormPanel({ defaultType: 'textfield', labelAlign: 'right', title: 'form1-center', labelWidth: 50, frame:

  • 通过viewport实现jsp页面支持手机缩放

    要加入<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"> 标签 其中个属性的意思: width :- viewport的宽度 height: - viewport的高度 initial-scale: - 初始的缩放比例 minimum-scale: -

  • 关于meta viewport中target-densitydpi属性详解（推荐）

    关于meta viewport中target-densitydpi属性详解（推荐）

    前段时间在做WAP页面,发现页面设置了meta viewport中的大众属性,即: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >  但发现页面依旧不根据手机屏幕进行自动缩放,后来找其他同事帮忙解决了,我看了源代码发现了是在原来的viewport中增加了target-densitydpi属性.看之初不太了解,也因为当时自己手

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

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

    通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系. 面板由一个工具栏.一个底部工具栏.面板头部.面板尾部和面板主区域几个部分组成.面本类中还提供了面板展开.关闭等功能.并提供了一些可重用的工具按钮让我们灵活的控制面板.面板可以放入其他任

  • ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

    ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

    天介绍一下Ext中组件举几个简单的例子做说明.注意:文章内容有些摘自本人学习过程中看到的资料. Ext2.0对框架进行了非常大的重构,其中最重要的是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext控件.Ext组件由Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件. Ext组件体系由下图所示: 组件大致可分成三大类,即基本组件.工具栏组件.表单元素组件.      基本组件有这么多的组件,可都是非常酷的.组件使

  • extjs 学习笔记（二） Ext.Element类

    区别在于fly返回的是Element轻量级的,占用较少的内存,但是不保存对象的引用,每次使用都会改变先前的对象,而get则会缓存每次返回的Element对象,但是占用较多的内存.我们通过一个例子来说明二者的区别,同时看看Element给我们提供的强大功能.在我们项目中添加一个html页面,内容如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

  • ExtJs 学习笔记 Hello World!第1/2页

    ExtJs 学习笔记 Hello World!第1/2页

    在了解基础后,可能会用Ext+ajax开发一个简单的小项目,会一点一滴的讲解项目开发过程,希望能给大家带来收获!因为我本人也在学习这个框架,所以对文章有什么建议请提出,这样可能会让我学到更多. 看到这幅图,你可能认为是某个软件,或者是Flash.Flex.silverlight等等,但这是javascript+Css实现的. 在看这样式与效果,如果加在自己的项目里,用户视觉与操作的体验应该会很爽吧. 还有更多的特效就不一一截图了.      下面开始说一下这个组件,ExtJs是一个不错的Ajax

  • extjs 学习笔记（三） 最基本的grid

    jquery在这方面则正好相反,它的UI都以插件形式提供,可以需要什么就引用什么,所以非常小巧灵活,但由于插件往往是由不同的人或者团队来提供,界面和接口往往就不那么一致.反正是各有千秋吧. 今天学习extjs中的grid,它可以说是功能强大,无出其右,只有你想不到的,没有它做不到的,呵呵,好像是有点夸张了.好,不说废话了,我们就从最简单的grid开始,一步步来看看extjs给我们提供的grid究竟给我们提供了哪些功能. 一个grid包括一些行和列,在extjs里边,列由Ext.grid.Colu

  • Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

    Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

    ExtJS中的renderTo和applyTo的差别 对applyTo和renderTo的理解和思考 个人认为这两篇文章写的不够通俗.写一个简单的例子来看看最终生成了什么代码, 复制代码 代码如下: <head> <title>RenderTo and ApplyTo</title> <link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/c

  • Extjs学习笔记之四 工具栏和菜单

    Extjs学习笔记之四 工具栏和菜单

    ToolBar的使用很简单,关键是向ToolBar上面添加内容,默认地ToolBar添加的是Button,不过实际上可以向Toolbar添加任意的组件.下面是一个例子: 复制代码 代码如下: <script type="text/javascript"> Ext.onReady(function() { var tb = new Ext.Toolbar({ renderTo: document.body, width: 600, height: 100, items: [

  • Extjs学习笔记之二 初识Extjs之Form

    Extjs学习笔记之二 初识Extjs之Form

    Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作.Extjs也对常用的html表单项进行了封装,提供了一些额外的功能,比如数据验证.实际使用的时候只要向FormPanel中添加这些表单项即可.常见的表单项有,TextField,NumberField,Radio,CheckBox等. 下面通过一个例子来

  • Extjs学习笔记之一 初识Extjs之MessageBox

    Extjs学习笔记之一 初识Extjs之MessageBox

    在其中新建一个my目录,以后所有的样例文件都新建在这个目录中.1.Hello world! 先看一个Extjs版的Hello World网页的全部代码: 复制代码 代码如下: <html> <head> <title>Extjs MessageBox</title> <link rel="Stylesheet" type="text/css" href="../resources/css/ext-all

  • Extjs学习笔记之六 面版

    Extjs学习笔记之六 面版

    Extjs为我们封装好了Panel,Panel具有统一的标题头,面板体,面板底部,还可以自由的添加工具栏等.另外,extjs中还有丰富的布局,可以用来布局Panel.这种方式很像Java的Swing. Panel可以嵌套,可以作为整个页面的框架,也可以作为一个小功能区.前几篇文中用到的FormPanel就是继承自Panel类的. 下面的例子展示了一个较为完整的Panel,主要是设置工具栏: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xht

随机推荐