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/