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")

    });

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")

    });

<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');

    }

});