extjs示例代码不起作用

时间:2013-02-01 07:45:52

标签: javascript extjs extjs4.1

Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
title: 'Container Panel',
items: [
    {
        xtype: 'panel',
        title: 'Child Panel 1',
        height: 100,
        width: '75%'
    },
    {
        xtype: 'panel',
        title: 'Child Panel 2',
        height: 100,
        width: '75%'
    }
]
});

以上代码未执行...您能否找到错误或错误。我对extjs很新。我通过documentaion找到了上面的代码(检查'容器'部分)。它在jsfiddle中执行正常,但在我的项目中没有。(其他示例在我的项目中正常工作)。

解答:

Ext.onReady(function(){
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        width: 400,
        height: 300,
        layout: 'hbox',
        title: 'Container Panel',
        items: [
           {
               xtype: 'panel',
               title: 'Child Panel 1',
               height: 100,                
               flex:1
           },
           {
               xtype: 'panel',
               title: 'Child Panel 2',
               height: 100,
               flex:1
           }
       ]
   });
});

1 个答案:

答案 0 :(得分:3)

几个问题:

1)您需要将代码包装在onReady块中。

2)宽度无效。他们两个都是75%?在这种情况下,您将需要使用hbox布局,每个子项都是flex:1。