【ExtJs】折叠式布局与卡片式布局

ExtJs中，除了border布局可以很好地做出成熟的界面，《【ExtJs】利用树状结构、Border布局与标签页刻划OA界面》（点击打开链接），常用的标签页布局《【ExtJs】tabPanel标签页与修改标签页的内容》（点击打开链接）以外。在ExtJs中我觉得最好的主布局还有折叠式布局与卡片式布局，而使组件一列排列vbox布局，与使组件一行排列hbox布局，我觉得还可以出出子布局，也就是主布局里面的东西，而那些什么表格布局，我觉得真没有什么用了，还不如直接放一个table标签或者div标签上去不用这么繁琐。

一、基本目标

下面用两个小例子，还说明个人认为ExtJs的重要的主布局，折叠式布局与卡片式布局。

首先是折叠式布局。如下图，能自动调整、自动移位的。

然后是卡片式布局，如下图，做了一个小小的计算器说明问题，这正如VC6中的《【mfc】利用单一对话框内的分页技术实现向导功能》（点击打开链接）一样也可以用来分页之类的，不解释了。

二、制作过程

1、首先是简单的HTML布局，除了引入ExtJs4资源，还有两个Button之外，再也没有了。ExtJs真的可以纯粹用JavaScript完成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Ext折叠、卡片</title>
        <script type="text/javascript" src="js/ext-all.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
        <link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <button id="btn1" type="button">打开折叠框</button>
		<button id="btn2" type="button">打开卡片框</button>
    </body>
</html>

2、首先是折叠框部分，折叠框的功能较少，因此代码也较短。折叠框使用窗口呈现，这不同于ExtJs中不可以移动、不可以调整的容器《【ExtJs】带日期组件的文本输入框、容器与Ext.Msg.alert告警框告警两次》（点击打开链接），但要注意ExtJs声明完窗口之后，绑定btn1这个在HTML中已经声明的按钮，使用show()方法显示。你需要多少个折叠页就在items中声明。折叠页还可以使用xtype或者html直接布局。

        //声明一个折叠框
        var window1 = Ext.create('Ext.window.Window', {
            layout: 'accordion',
            width: 260,
            height: 300,
            title: '折叠框',
            resiziable: true,//表示可以自由调整折叠框的大小
            titleCollapse: true, //表示点击标题折叠
            renderTo: Ext.getBody(),
            items: [{
                title: '标题1',
                hideCollapseTool: true,
                html: '内容1'
            }, {
                title: '标题2',
                hideCollapseTool: true,//表示隐藏所含Panel的展开/收缩工具按钮
                html: '内容2'
            }, {
                title: '标题3',
                hideCollapseTool: true,
                html: '内容3'
            }]
        });
        Ext.get("btn1").on("click", function(){
            window1.show()//窗口默认不显示;
        });

3、之后是卡片框。功能有点多，代码比较长，但是主要集中在最后一页的各个button的监听事件。其实这些监听事件都是相同，一段拿走第0页与第1页的输入框的内容，检测是否是数之后，再相加。这个代码在《【JavaScript】对数的判断与对数的处理》（点击打开链接）写过了。不赘述了。

		//这里是卡片布局中“上一步”、“下一步”两个按钮的必要设置
        var navigate = function(panel, direction){
            var layout = panel.getLayout();
            layout[direction]();
            Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
            Ext.getCmp('move-next').setDisabled(!layout.getNext());
        };

        var window2 = Ext.create('Ext.window.Window', {
            title: '卡片布局',
            width: 300,
            height: 200,
            layout: 'card',
            bodyStyle: 'padding:15px',//设置内容上下左右冗余15px
            bbar: [{
                id: 'move-prev',
                text: '上一步',
                handler: function(btn){
                    navigate(btn.up("panel"), "prev");
                },
                disabled: true
            }, {
                xtype: 'tbfill'
            }, // 占位符，使上一步按钮、下一步按钮分居两侧
            {
                id: 'move-next',
                text: '下一步',
                handler: function(btn){
                    navigate(btn.up("panel"), "next");
                }
            }],
            // 布局下的各子面板
			// 第0页与第1页都是使用hbox，组件一行排列的布局声明好id，为最后1页，也就是第2页的按钮所操作。
            items: [{
                id: 'card-0',
				layout:'hbox',
				items:[{
					xtype:'label',
                	text:'第一个数：'
				},
				{
					xtype:'textfield', //与<input type="text" id="num1" />没有任何区别
                	id:'num1'
				}]
            }, {
                id: 'card-1',
				layout:'hbox',
                items:[{
					xtype:'label',
                	text:'第二个数：'
				},
				{
					xtype:'textfield',
                	id:'num2'
				}]
            }, {
                id: 'card-2',
				layout:'hbox',
                items:[{
					xtype:'button',
					text:'求和',
					listeners: {//此乃按钮被点击的事件，与<button onclick="">求和</button>没有任何区别
						click: function(){
							var num1=Ext.getCmp("num1").getValue();
							var num2=Ext.getCmp("num2").getValue();
							var result;
							if(isNaN(num1)||isNaN(num2)||!num1||!num2)
								result="任意一个不是数！"
							else{
								result="两数相加的结果是："+(parseFloat(num1)+parseFloat(num2));
							}
							Ext.Msg.alert("两数之和",result);
						}
					}
				},{
					xtype: 'button',
					text: '求差',
					listeners: {
						click: function(){
							var num1 = Ext.getCmp("num1").getValue();
							var num2 = Ext.getCmp("num2").getValue();
							var result;
							if (isNaN(num1) || isNaN(num2) || !num1 || !num2)
								result = "任意一个不是数！"
							else {
								result = "两数相减的结果是：" + (parseFloat(num1) - parseFloat(num2));
							}
							Ext.Msg.alert("两数之差", result);
						}
					}
				},{
					xtype: 'button',
					text: '求积',
					listeners: {
						click: function(){
							var num1 = Ext.getCmp("num1").getValue();
							var num2 = Ext.getCmp("num2").getValue();
							var result;
							if (isNaN(num1) || isNaN(num2) || !num1 || !num2)
								result = "任意一个不是数！"
							else {
								result = "两数相乘的结果是：" + (parseFloat(num1) * parseFloat(num2));
							}
							Ext.Msg.alert("两数之积", result);
						}
					}
				},{
					xtype: 'button',
					text: '求商',
					listeners: {
						click: function(){
							var num1 = Ext.getCmp("num1").getValue();
							var num2 = Ext.getCmp("num2").getValue();
							var result;
							if (isNaN(num1) || isNaN(num2) || !num1 || !num2)
								result = "任意一个不是数！"
							else {
								result = "两数相除的结果是：" + (parseFloat(num1) / parseFloat(num2));
							}
							Ext.Msg.alert("两数之商", result);
						}
					}
				}
				]
            }],
            renderTo: Ext.getBody()
        });
		Ext.get("btn2").on("click", function(){
            window2.show()//窗口默认不显示;
        });

三、总结

因此，整个网页的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Ext折叠、卡片</title>
        <script type="text/javascript" src="js/ext-all.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
        <link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <button id="btn1" type="button">打开折叠框</button>
		<button id="btn2" type="button">打开卡片框</button>
    </body>
</html>
<script>
    Ext.onReady(function(){
        //声明一个折叠框
        var window1 = Ext.create('Ext.window.Window', {
            layout: 'accordion',
            width: 260,
            height: 300,
            title: '折叠框',
            resiziable: true,//表示可以自由调整折叠框的大小
            titleCollapse: true, //表示点击标题折叠
            renderTo: Ext.getBody(),
            items: [{
                title: '标题1',
                hideCollapseTool: true,
                html: '内容1'
            }, {
                title: '标题2',
                hideCollapseTool: true,//表示隐藏所含Panel的展开/收缩工具按钮
                html: '内容2'
            }, {
                title: '标题3',
                hideCollapseTool: true,
                html: '内容3'
            }]
        });
        Ext.get("btn1").on("click", function(){
            window1.show()//窗口默认不显示;
        });

		//这里是卡片布局中“上一步”、“下一步”两个按钮的必要设置
        var navigate = function(panel, direction){
            var layout = panel.getLayout();
            layout[direction]();
            Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
            Ext.getCmp('move-next').setDisabled(!layout.getNext());
        };

        var window2 = Ext.create('Ext.window.Window', {
            title: '卡片布局',
            width: 300,
            height: 200,
            layout: 'card',
            bodyStyle: 'padding:15px',//设置内容上下左右冗余15px
            bbar: [{
                id: 'move-prev',
                text: '上一步',
                handler: function(btn){
                    navigate(btn.up("panel"), "prev");
                },
                disabled: true
            }, {
                xtype: 'tbfill'
            }, // 占位符，使上一步按钮、下一步按钮分居两侧
            {
                id: 'move-next',
                text: '下一步',
                handler: function(btn){
                    navigate(btn.up("panel"), "next");
                }
            }],
            // 布局下的各子面板
			// 第0页与第1页都是使用hbox，组件一行排列的布局声明好id，为最后1页，也就是第2页的按钮所操作。
            items: [{
                id: 'card-0',
				layout:'hbox',
				items:[{
					xtype:'label',
                	text:'第一个数：'
				},
				{
					xtype:'textfield', //与<input type="text" id="num1" />没有任何区别
                	id:'num1'
				}]
            }, {
                id: 'card-1',
				layout:'hbox',
                items:[{
					xtype:'label',
                	text:'第二个数：'
				},
				{
					xtype:'textfield',
                	id:'num2'
				}]
            }, {
                id: 'card-2',
				layout:'hbox',
                items:[{
					xtype:'button',
					text:'求和',
					listeners: {//此乃按钮被点击的事件，与<button onclick="">求和</button>没有任何区别
						click: function(){
							var num1=Ext.getCmp("num1").getValue();
							var num2=Ext.getCmp("num2").getValue();
							var result;
							if(isNaN(num1)||isNaN(num2)||!num1||!num2)
								result="任意一个不是数！"
							else{
								result="两数相加的结果是："+(parseFloat(num1)+parseFloat(num2));
							}
							Ext.Msg.alert("两数之和",result);
						}
					}
				},{
					xtype: 'button',
					text: '求差',
					listeners: {
						click: function(){
							var num1 = Ext.getCmp("num1").getValue();
							var num2 = Ext.getCmp("num2").getValue();
							var result;
							if (isNaN(num1) || isNaN(num2) || !num1 || !num2)
								result = "任意一个不是数！"
							else {
								result = "两数相减的结果是：" + (parseFloat(num1) - parseFloat(num2));
							}
							Ext.Msg.alert("两数之差", result);
						}
					}
				},{
					xtype: 'button',
					text: '求积',
					listeners: {
						click: function(){
							var num1 = Ext.getCmp("num1").getValue();
							var num2 = Ext.getCmp("num2").getValue();
							var result;
							if (isNaN(num1) || isNaN(num2) || !num1 || !num2)
								result = "任意一个不是数！"
							else {
								result = "两数相乘的结果是：" + (parseFloat(num1) * parseFloat(num2));
							}
							Ext.Msg.alert("两数之积", result);
						}
					}
				},{
					xtype: 'button',
					text: '求商',
					listeners: {
						click: function(){
							var num1 = Ext.getCmp("num1").getValue();
							var num2 = Ext.getCmp("num2").getValue();
							var result;
							if (isNaN(num1) || isNaN(num2) || !num1 || !num2)
								result = "任意一个不是数！"
							else {
								result = "两数相除的结果是：" + (parseFloat(num1) / parseFloat(num2));
							}
							Ext.Msg.alert("两数之商", result);
						}
					}
				}
				]
            }],
            renderTo: Ext.getBody()
        });
		Ext.get("btn2").on("click", function(){
            window2.show()//窗口默认不显示;
        });
    })
</script>
时间： 2024-12-16 09:39:23

【ExtJs】折叠式布局与卡片式布局的相关文章

避免窗口切换闪烁——卡片式布局的使用方法

在一个程序中,如果每个模版的切换都需要开启一个新窗口,一来窗口逐渐多了会造成混乱,二来新窗口突然弹出造成的闪烁难免会然用户产生不好的体验. 这时,可以使用卡片式布局来实现在一个窗口内切换不同面板. 1:首先,往窗口拖动一个面板,作为母容器. 2:右键该面板,选择“设置布局”——>“卡片式布局” 3:之后就可以往该母容器添加面板,调整大小.添加组件.设置事件.注意,添加的面板要在导航器中调整等级,必须处于母容器内并且子容器并行等级.并且,卡片在母容器内的序号同其添加的顺序,而且从2开始递增.0,1

【Ratchet】卡片式布局

卡片式布局在手机版的网站中很常见,这一点Ratchet框架中,这一点还做得不错的. 本手机版网页的开放前端框架的搭建,在<[Ratchet]Ratchet2.0.2的下载.配置与Helloworld>(点击打开链接)中已经介绍过了. 比如如下的效果: 其实现代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&g

【AmazeUI】卡片式布局

本文与<[Ratchet]卡片式布局>(点击打开链接)为姊妹篇,在AmazeUI的官网上没有这种布局,但是,我们可以利用其面板组的方式去实现. 先贴上本网页所处的目录结构,同样地,在windows下的Web文件夹趴了几张图片做实验.当然,为了节省用户的流量与节省服务器的容量,实际的操作中不应该使用如此高清的图片. 做出如下的效果: 其现实的代码如下: <!--使用HTML5开发--> <!doctype html> <html class="no-js&

android——卡片式布局

一.CardView <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="

无废话ExtJs 入门教程十六[页面布局：Layout]

无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distribution;layout] 对事物的全面规划和安排,布:陈设:设置. 我对布局理解是“把**东西放在**位置显示”[动词]. ok,我们这节课就讲一下怎么样把 ExtJs 的组件,放到我们想放置的位置. 一.常用布局 (1)ContainerLayout:默认布局方式,其他布局继承该类进行扩展功能.显示:

ExtJS中layout的12种布局风格

原文地址: http://www.cnblogs.com/mingforyou/p/4119200.html ExtJS中layout的12种布局风格 extjs的容器组件都可以设置它的显示风格,它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table.  一共9种. 另外几种见:  http://www.sencha.com/deploy/dev/examples/layout-browser/l

android 卡片式视图组件 cardview的使用

cardview是放在support library v7包中的一个组件(recyclerview也是在这里喔,详细会在后边的博客里介绍) 开始在写recyclerview的demo的时候,发现别人写出来的都是卡片式的布局,很好看喔-而我写的还是和原来的ListView一个样式,查了半天,最后才发现在条目布局上出现了不同,这里也就涉及到了cardview的使用. <span style="font-size:14px;"><android.support.v7.wid

如何编码实现卡片式的listView

一直很喜欢使用知乎日报, 也一直很钟情于知乎日报的卡片式设计,不过基于某种原因,一直在项目中没怎么使用到,恰好今天在弄毕设的时候,想到确实可以再自己listView的美化下一些功夫,于是自然就想到了卡片式,便着手研究了下,实现了这种效果.效果图如下: 首先先写好我们的布局,既然是listView,当然就少不了两个基本的布局啦,一个就是大家熟悉的listView(我这里使用的是开源的XlistVIew),另一个就是listView的item布局啦. ListView.xml如下: <Relativ

《Ext.net》布局以及Ext JS布局

今天主要对Ext.net布局和Ext js 布局的一个学习. Ext.Net布局概述 Ext.Net中的布局是对ExtJS布局的封装,可以用在panel控件,或者继承自panel的控件,例如window.form.gridpanel.treepanel等.首先来看一个简单的例子: <ext:Window runat="server" ID="win1" Title="Layout示例" Width="600" Heigh