Extjs中，boder layout无法正常显示

源代码：main.html: 
<html>
<head>
    <title>Hello Ext</title>    <link rel="stylesheet" type="text/css" href="../static/js/extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="../static/js/extjs/ext-debug.js"></script>
    <script type="text/javascript" src="../static/js/custmain.js"></script>
    <script type="text/javascript" src="../static/js/custfilter.js"></script>
    <script type="text/javascript">
      //  Ext.Loader.setConfig({enabled: true});
      //  Ext.Loader.setPath('Ext.ux', '../ux/');
        Ext.require([
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.util.*',
            'Ext.Action',
            'Ext.tab.*',
            'Ext.button.*',
            'Ext.form.*',
            'Ext.layout.container.Card',
            'Ext.layout.container.Border'
        ]);
      Ext.require('Ext.form.Panel');
      Ext.require('Ext.form.field.Date');
      Ext.require('Ext.container.Viewport');      Ext.onReady(function(){
          Ext.define('Customers.App', {
              extend: 'Ext.container.Viewport',
              layout: 'border'
              ,items: [{
                  title: 'title space'
                  ,region: 'north'
                  ,height: 100
                  ,border: false
              }
                  ,{ // title: 'login are'
                      //  ,
                      region: 'center'
                      ,border: false
                      // ,width: 400
                      ,items: [Ext.create('Ext.form.Panel', {
                          renderTo: Ext.getBody(),
                          title: 'User Form',
                          // align: 'center',
                          height: 150,
                          // width: 380,
                          // layout: 'vbox',                          bodyPadding: 10,
                          defaultType: 'textfield',
                          fieldDefaults: {
                              msgTarget: 'under',
                              allowBlank: false,
                              // fieldCls: 'cTextCenter'
                              style: "margin: 0px auto 0px auto;",
                              // labelAlign: 'center'
                              width: 380
                              // height: 200
                              //    align: 'center'
                          },
                          // The form will submit an AJAX request to this URL when submitted
                          url: 'login/',
                          items: [
                              {
                                  fieldLabel: 'Login ID',
                                  name: 'username',
                                  allowBlank: false                              },
                              // '',
                              {
                                  fieldLabel: "Password",
                                  inputType: "password",
                                  name: "password",
                                  minLength: 6
                              }                          ],
                          buttons: [
                              {
                                  text: 'Login',
                                  handler: function() {
                                      var form = this.up('form').getForm(); // get the basic form
                                      if (form.isValid()) { // make sure the form contains valid data before submitting
                                          form.submit({
                                              success: function(form, action) {
                                                  Ext.Msg.alert('Success', action.result.msg);
                                              },
                                              failure: function(form, action) {
                                                  Ext.Msg.alert('Failed', action.result.msg);
                                              }
                                          });
                                      } else { // display error alert if the data is invalid
                                          Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
                                      }
                                  }
                              }
                          ]
                      })]                  }
                  ,{   //title: 'login are'
                      // ,
                      region: 'east'
                      ,width: 375
                      ,border: false                  }
                  ,{   //title: 'login are'
                      // ,
                      region: 'west'
                      ,width: 375
                      ,border: false                  }
              ]          });          Ext.QuickTips.init();
          var app = new Customer.App();      });    </script></head>
<body></body></html> 用Ext.create是可以正常的，但是一旦用Ext.define就无法正常显示了，谁能帮忙告诉我是什么原因么？

解决方案 »

  1.   

    Ext.define： 2 Ext.define('App.MainFunctionPanel',{
     3         extend:'Ext.Panel',
     4         requires:'App.MainFunctionTree',
     5         alias:'widget.MainFunctionPanel',
     6     title: '功能选择',
     7     split: true,
     8     width: 200,
     9     minWidth: 175,
    10     maxWidth: 400,
    11     collapsible: true,
    12     animCollapse: true,
    13     margins: '0 0 0 5',
    14     layout: 'accordion',
    15     items: [
    16     {
    17             xtype:'FunctionTree',
    18             title: '文件浏览',
    19             id:'mainFunctionFile',
    20         iconCls: 'nav', // see the HEAD section for style used
    21         listeners: {
    22             //beforerender: function () { alert('beforerender'); },
    23             //beforecollapse: function () { alert('beforecollapse'); },
    24             //beforeexpand: function () { alert('beforeexpand'); },
    25             expand: function () { Ext.getCmp('mainTabPanel').setActiveTab(Ext.getCmp('mainFilePanel')); }
    26         }
    27     }, {
    28         title: '文件查找',
    29         id:'mainFunctionSearch',
    30         html: '<p>Some settings in here.</p>',
    31         iconCls: 'settings',
    32         listeners: {
    33             //beforerender: function () { alert('beforerender'); },
    34             //beforecollapse: function () { alert('beforecollapse'); },
    35             //beforeexpand: function () { alert('beforeexpand'); },
    36             expand: function () { Ext.getCmp('mainTabPanel').setActiveTab(Ext.getCmp('mainSearchPanel')); }
    37         }
    38     }, {
    39         title: '系统管理',
    40         id:'mainFunctionAdmin',
    41         html: '<p>Some info in here.</p>',
    42         iconCls: 'info',
    43         listeners: {
    44             //beforerender: function () { alert('beforerender'); },
    45             //beforecollapse: function () { alert('beforecollapse'); },
    46             //beforeexpand: function () { alert('beforeexpand'); },
    47             expand: function () { Ext.MessageBox.alert('消息', '系统管理展开了！'); }
    48         }
    49     }]
    50 });Ext.create： //也可以使用Ext.create创建对象，但不要使用new13   Ext.create('Ext.tab.Panel', {14       region: 'center',15       id:'mainTabPanel',16       deferredRender: false,17       activeTab: 0,18       items: [{19               id:'mainFilePanel',20           title: '文件浏览',21           autoScroll: true,22           listeners: {23                 activate: function () { Ext.getCmp('mainFunctionFile').expand() }24             }25       },{26               id:'mainSearchPanel',27           title: '文件查找',28           autoScroll: true,29           listeners: {30                 activate: function () { Ext.getCmp('mainFunctionSearch').expand() }31             }32       }]33   })
      
      

  2.   

    http://www.cnblogs.com/luyingxue/archive/2011/05/21/2052813.html
      

  3.   

    用Ext.create是可以正常的，但是一旦用Ext.define就无法正常显示？你知道两者有什么区别吗？
    create是创建对象，define是类renderTo: Ext.getBody(),去掉items: [Ext.create('Ext.form.Panel'不需要这样写，你只需要写
    items: [xtype：‘gridpanel’就OK了