extjs单个combox无法渲染

时间:2017-12-13 09:34:18

标签: extjs

当我在浏览器中执行此html代码时,我得到一个空白屏幕并且无法找到错误,尝试在线提供所有可能的备用代码,我应该在Ext.create()之前定义一些内容吗?请帮忙。

  <html>
  <head>
    <title>Combo Box</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href = 
     "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-
      classic/resources/theme-classic-all.css" 
     rel = "stylesheet" />
    <script type = "text/javascript" 
     src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js">
   </script>

         <script type="text/javascript">
        Ext.onReady(function() { Ext.create({ //creating combobox
            fullscreen: true,
            xtype: 'container',
            padding: 50,
            layout: 'vbox',
            items: [{
                xtype: 'combobox',      //set type to combobox
                label: 'Choose State',  
                queryMode: 'local',
                displayField: 'name',
                valueField: 'abbr',
          store: [
                { abbr: 'AL', name: 'Alabama' },  //list values in combobox
                { abbr: 'AK', name: 'Alaska' },
                { abbr: 'AZ', name: 'Arizona' }
               ]
            }]
        });
     });
   </script>
    <body>
    </body>
  </html>

1 个答案:

答案 0 :(得分:0)

您缺少 renderTo 属性。

示例:

Ext.onReady(function () {
    Ext.create({ //creating combobox
        fullscreen: true,
        xtype: 'container',
        padding: 50,
        layout: 'vbox',
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'combobox', //set type to combobox
            fieldLabel: 'Choose State',
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            store: Ext.create('Ext.data.Store', {
                data: [{
                        abbr: 'AL',
                        name: 'Alabama'
                    }, //list values in combobox
                    {
                        abbr: 'AK',
                        name: 'Alaska'
                    }, {
                        abbr: 'AZ',
                        name: 'Arizona'
                    }
                ]
            })
        }]
    });
});

此外,商店配置也在示例中得到纠正。

工作小提琴: https://fiddle.sencha.com/#view/editor&fiddle/2atl