ExtJS学习之路第六步:深入讨论组件Panel用法
Panel加载页面
var myPanel=Ext.create('Ext.panel.Panel',{
bodyPadding: "15px 10px 0 10px",
title:'目标',
width:300,
height:220,
html:'<p>好好学习,天天向上!</p>',//当你添加autoLoad之后,这个内容没有添加上
bodyStyle:'background:pink;color:white',
frame:false,//True to apply a frame to the panel.
autoScroll:true,//是否自动滚动
collapsible:true,//是否可折叠
autoLoad:'justLoad.html',
contentEl:"conPanel",//当你添加autoLoad之后,这个内容没有添加上
renderTo:Ext.get("addPanel")
});
中间这个frame没有true/false没有测出差别,如果有朋友指出,会非常感谢!
一个登陆
var myPanel=Ext.create('Ext.panel.Panel',{
bodyPadding: "15px 10px 0 10px",
title:'目标',
width:300,
height:150,
bodyStyle:'background:pink;color:white',
frame:false,//True to apply a frame to the panel.
layout:'form',
defaults:{xtype:'textfield',width:180},
items:[{fieldLabel:"帐号"},{fieldLabel:"密码"}],
buttons:[{text:"确定"},{text:"取消"}],
/* dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {minWidth:80},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: '确定' },
{ xtype: 'button', text: '取消' }
]
}],与上面buttons的写法等价*/
renderTo:Ext.get("addPanel")
});
CSS3结合Panel做个翻转扑克
css3的perspective和backface-visibility:hidden;这个只能在非ie下看到效果哦,因为backface-visibility在ie10下也不支持,只能通过js模拟。
<div class='flip'>
<div class='card'>
<div id = 'front' class = 'face front'></div>
<div id = 'back' class = 'face back'></div>
</div>
</div>
.flip { -webkit-perspective:;/*透视*/width: 300px;height: 200px;position: relative;margin: 50px auto;}
.flip .card.flipped {-webkit-transform: rotateY(-180deg);}/*可尝试换成rotateX*/
.flip .card {width: 100%;height: 100%;font-size: 3em;text-align: center;
-webkit-transform-style: preserve-3d;/*保留3d变换*/
-webkit-transition:-webkit-transform 0.5s;}
.flip .card .face { width: 100%;height: 100%;position: absolute;-webkit-backface-visibility: hidden ;color:whtie;}/*-webkit-backface-visibility: hidden ;这才会看到正反面的效果*/
.flip .card .front {position: absolute;z-index:;}/*注意z-index的值*/
.flip .card .back {z-index:;-webkit-transform: rotateY(-180deg);}/*可尝试换成rotateX*/
.x-panel-body-default{color:white;}
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
id: 'frontcard',
height: 300,
bodyStyle: {
"background-color": "purple"
},
html: '<h1>Front</h1>',
renderTo: 'front',
listeners: {
'render': function(panel) {
panel.body.on('click', function() {
var cardq = Ext.select('.card');
cardq.each(frontflipCard);
});
}
}
});
Ext.create('Ext.panel.Panel', {
id: 'backcard',
height: 300,
bodyStyle: {
"background-color": "pink"
},
html: '<h1>Back</h1>',
renderTo: 'back',
listeners: {
'render': function(panel) {
panel.body.on('click', function() {
var cardq = Ext.select('.card');
cardq.each(backflipCard);
});
}
}
});
function frontflipCard(el, c, index) {
el.addCls('flipped');
}
function backflipCard(el, c, index) {
el.removeCls('flipped');
}
});
旋转的瞬间
参考文档
FLIPPING AN EXTJS PANEL WITH CSS -http://bannockburn.io/2013/06/flipping-an-extjs-panel-with-css3/
ExtJS学习之路第六步:深入讨论组件Panel用法的更多相关文章
- ExtJS学习之路第八步:Window组件
一个专门Panel用作程序窗口.默认的,Window可以是浮动的(floated).可缩放(resizable)以及可拖动的(draggable).Window能够被最大化适应可视窗口,(restor ...
- 微软企业库5.0 学习之路——第六步、使用Validation模块进行服务器端数据验证
前端时间花了1个多星期的时间写了使用jQuery.Validate进行客户端验证,但是那仅仅是客户端的验证,在开发项目的过程中,客户端的信息永远是不可信的,所以我们还需要在服务器端进行服务器端的验证已 ...
- ExtJS学习之路第五步:认识最常见组件Panel
文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...
- ExtJS学习之路第四步:看源码,实战MessageBox
可以通过看MessageBox.js的源码来深入认识,记住它的主要用法.Ext.MessageBox是实用类,用于生成不同风格的消息框,它是Singleton(单例),别名Ext.Msg.注意Mess ...
- ExtJS学习之路第三步:理解引擎之下,ExtJS4中的类
写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码. Classes in Ext JS 4: Under the hood Countdown to Ex ...
- ExtJS学习之路第七步:contentEl与renderTo的区别
上回在Panel的应用中我们应该能大致区分开conteEl和renderTo,这回我们从定义中区分. 在Panel的API中, contentEl:String指定一个现有的HTML元素或者id作为此 ...
- 微软企业库5.0 学习之路——第八步、使用Configuration Setting模块等多种方式分类管理企业库配置信息
在介绍完企业库几个常用模块后,我今天要对企业库的配置文件进行处理,缘由是我打开web.config想进行一些配置的时候发现web.config已经变的异常的臃肿(大量的企业库配置信息充斥其中),所以决 ...
- 微软企业库5.0 学习之路——第七步、Cryptographer加密模块简单分析、自定义加密接口及使用—下篇
在上一篇文章中, 我介绍了企业库Cryptographer模块的一些重要类,同时介绍了企业库Cryptographer模块为我们提供的扩展接口,今天我就要根据这些 接口来进行扩展开发,实现2个加密解密 ...
- 微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——下篇
一.独立验证器 我上篇中我将AndCompositeValidator和OrCompositeValidator归为独立验证器,这2个验证器主要是为了第一类验证服务,可以进行多种验证组合在一起进行复杂 ...
随机推荐
- LeetCode:Best Time to Buy and Sell Stock I II III
LeetCode:Best Time to Buy and Sell Stock Say you have an array for which the ith element is the pric ...
- [MetaHook] Load TGA texture to OpenGL
This function load a *.tga texture file and convert to OpenGL pixel format, uncompress only. #pragma ...
- iOS - 语音云通讯
iOS SDK 2.0 语音及图片消息详解本文档将详细介绍融云的语音及图片消息接口功能及使用说明.阅读本文前,我们假设您已经阅读了融云 iOS 开发指南,并掌握融云 SDK 的基本用法. 语音消息用来 ...
- 20145233《Java程序设计》课程总结
20145233 <Java程序设计>学习总结 每周学习博客汇总 20145233韩昊辰 第一周总结 20145233韩昊辰 第二周总结 20145233韩昊辰 第三周总结 2014523 ...
- 从无重复大数组找TOP N元素的最优解说起
有一类面试题,既可以考察工程师算法.也可以兼顾实践应用.甚至创新思维,这些题目便是好的题目,有区分度表现为可以有一般解,也可以有最优解.最近就发现了一个这样的好题目,拿出来晒一晒. 1 题目 原文: ...
- 需要中文版《The Scheme Programming Language》的朋友可以在此留言(内附一小段译文)
首先给出原著的链接:http://www.scheme.com/tspl4/. 我正在持续翻译这本书,大概每天都会翻译两小时.若我个人拿不准的地方,我会附上原文,防止误导:还有些不适合翻译的术语,我会 ...
- C/C++程序从编译到链接的过程
编译器是一个神奇的东西,它能够将我们所编写的高级语言源代码翻译成机器可识别的语言(二进制代码),并让程序按照我们的意图按步执行.那么,从编写源文件代码到可执行文件,到底分为几步呢?这个过程可以总结为以 ...
- hello-weapp 微信小程序最简示例教程
打开微信小程序官方开发文档,最好全篇看一遍,基本上就会了. 点击文档中 工具 选项卡中 下载工具页面 下载对应系统版本的微信开发者工具 注意:脱离微信开发者工具是不能调试的 好了,安装下工具即可打开, ...
- Git.Framework 框架随手记--ORM条件组合
在上一篇<Git.Framework 框架随手记--ORM新增操作>中简单记录了如何对数据进行删除和修改,其用法都非常简单,在文章中提到了Where()方法,本文将详述Where() 等条 ...
- 【转载】gcc 使用中常用的参数及命令
本文转载自:http://www.cnblogs.com/yaozhongxiao/archive/2012/03/16/2400473.html 如需转载,请注明原始出处.谢谢. --------- ...