ExtJS学习之路第六步：深入讨论组件Panel用法

来源：互联网发布：网络业务割接方案编辑：程序博客网时间：2024/05/21 17:10

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

0 0