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: 800;/*透视*/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: 1;}/*注意z-index的值*/
.flip .card .back {z-index: 2;-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常用方法