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常用方法

博客专栏ExtJS