如何在sencha touch中使用Ext.panel.Panel?

时间:2013-05-29 04:48:08

标签: javascript extjs sencha-touch

我正在使用phonegap和sencha touch来构建Android应用程序。 我有sencha-touch-all.js和sencha-touch.css文件。

我正在使用Ext.Carousel并且它工作得很好。我想使用面板作为Carousel的叠加层。如果我写new Ext.Panel它可以工作。 ButExt.panel.Panel不工作它说“TypeError:Ext.panel未定义” 任何帮助? 我的代码如下::

var overlay = new Ext.panel.Panel({
    overlay: true,
    id:'myPanel',

    width: 400,
    height: 280,
        left: 200,
        top : 18,
        style:'background-color:#00CC33' ,
        cls:'my-panel',
        fullscreen:true,
        draggable : true,
        resizable : true,
        closable : true,

                    items: [
                {
                                  label: 'Name',
                                  xtype: 'textfield',
                                  name:'textField1'
                },
                {
                                  label: 'Email',
                                  xtype: 'emailfield',
                                  name:'textField2'
                },
                {
                                   label: 'Password',
                                   xtype: 'passwordfield',
                                   name:'textField3'

                }
            ]
});

  myCarousel.add(overlay);

而不是Ext.panel.panel,如果我使用Ext.Panel,它的工作原理。但我无法关闭那个没有给出任何关闭按钮的panle。但我希望我的面板可拖动,可调整大小和可关闭。 是否有必要使用ext.js以及sencha-touch-all.js ??

任何帮助?

1 个答案:

答案 0 :(得分:0)

我通过以下链接得到了答案:How to embed a custom close button in top right hand corner of a Ext.MessageBox Sencha Touch 2.0

写在这里:

var box = Ext.create('Ext.Panel',
                             {
                                 id: 'message-box',
                                 title: 'title', 
                                 message: 'message', 
                                 items: [
                                     {
                                     xtype: 'toolbar',
                                     height: '40px',
                                     docked: 'top',
                                     items: [
                                         {xtype: 'spacer'},
                                         {xtype: 'button', 
                                          text: 'X', 
                                          ui: 'plain',
                                          style: {padding: '5px'},
                                          handler: function(){Ext.getCmp('message-box').hide();}
                                         },
                                     ],
                                     }
                                 ]
                            });
        box.show();