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个验证器主要是为了第一类验证服务,可以进行多种验证组合在一起进行复杂 ...
随机推荐
- 20145208《Java程序设计》第2周学习总结
2015208 <Java程序设计>第2周学习总结 教材学习内容总结 本章内容主要讲了类型.变量与运算符的一些知识,也讲了一些基本的流程语法. 类型 基本类型 整数:short整数(占2字 ...
- Qt opencv程序运行异常
搭建了两次qt opencv vs ,经常出现程序运行异常.找了几个原因如下: 1.opencv的路径未配置或配置有误. 2.qt中pro文件包含不正确. 3.测试opencv程序不正确.如视频或图片 ...
- css优化篇
平时总说如何如何优化,今天就详细的写一下css如何优化,嘿嘿. 首先,CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都 ...
- Android Studio配置Git及Git文件状态说明
Android Studio配置Git还是比较简单的,麻烦的是可能中间出现各种问题.如果你想了解或感兴趣,请往下看. 首先你得下载Git客户端,网址:http://git-scm.com/downlo ...
- ASP.NET MVC系列 框架搭建(一)之仓储层的搭建
大神勿喷,小神默默学. 会了就是不值一提的东西,不会就是绝对的高大上. 最后上传源码.希望能给读者带来一些新的认识及知识. 还没上过头条..各位大神,请点支持一下小弟. 陆续更新.更新到你会为止!! ...
- deerlet-redis-client添加集群支持,邀请各路大神和菜鸟加入。
引言 经过几周的修改,deerlet已经添加了对于redis集群的支持,策略与memcached客户端一样,采用一致性Hash.不过目前Hash的算法取自Java自带的String类型的HashCod ...
- OC和Java的比较
1.Cocoa是什么?Cocoa是使用OC语言编写的工具包,里面有大量的类库.结构体,说白了其实就相当于java中的标准API.C++中的标准库.OC中没有命名空间的概念,所以使用加前缀来防止命名冲突 ...
- iBATIS sqlMapConfig配置详解
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE sqlMapConfig PUBLIC & ...
- iOS开发小技巧--设置cell左右有空隙,设置分割线的新思路,重写setFrame:让别人在外界无法修改控件的大小
如图:需要自定义cell
- [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)
有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...