Question

我是ExtJS的新手。我开始编写一个小形式。我对Ext.create和new运算符的使用感到困惑。

所以这是代码：

我想编写一个表单。我在其中一个sencha页面上找到了一个小例子。它会创建一个这样的表单：

var descAndSystem = new Ext.form.Panel ({
    region: 'center',
    layout: 'vbox',
    margins: '5 5 5 5',
    xtype: 'form',
    title: 'Some title',
    id: 'descAndSystem',
    width: '800', 
    items: [
       { xtype: 'textarea',
     fieldLabel: 'Provide a description',
     name: 'rightdescription',
       },
       {
      xtype: 'combobox',
      fieldLabel: 'Choose System',
      store: systems,
      queryMode: 'local',
      displayField: 'name',
      valueField: 'name',
      name: 'system'
       }
    ]
});

然后我使用descAndSystem作为视口中的组件：

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    id: 'wizardcontainer',
    items: [
        descAndSystem,
        {
            region: 'south', 
            layout: 'hbox',
            margins: '5 5 5 5',
            items: [
               { xtype: 'button', text: '&lt;&lt; Back', handler: onNext },
               { xtype: 'button', text: 'Next &gt;&gt;', handler: onNext },
               { xtype: 'button', text: 'Cancel', align: 'right', handler: function () { alert ('Abgebrochen geklickt.'); } }
            ]
        }
   ]
});

经过大量的反复试验后，我发现我可以通过以下代码访问表单的值：

Ext.getCmp ('descAndSystem').getForm ().findField ('rightdescription').getValue ()

与我买的书之一相反，下面的代码不起作用：

Ext.getCmp ('rightdescription').getValue ()

但我真正的问题是我希望

Ext.create ('Ext.form.Panel', { .... });

与

相同

new Ext.form.Panel ( {...});

但是，当我执行后者时，Chrome解释器说：

Uncaught TypeError: Cannot read property 'Panel' of undefined'

再次，经过大量的反复试验，以下工作：

new Ext.Panel ( {...});

不仅我在文档中找不到对该名称的对象的引用，还有

行

Ext.getCmp ('descAndSystem').getForm ().findField ('rightdescription').getValue ()

现在产生错误：

Uncaught TypeError: Object [object Object] has no method 'getForm'

另外，我试图通过DOM操作替换另一种形式的descAndSystem，文档中有各种替换方法。他们都没有工作，我总是收到错误消息“没有方法'替换'”。我强烈怀疑我从根本上弄错了什么。任何提示？我在Ubuntu 10.10 64位上使用ExtJS 4和Chromium 17.0.963.56。

Answer 1

主要区别在于，如果Ext.create('Ext.form.Panel')类不存在，Ext.form.Panel将自动下载相应的javascript文件。 vanilla new运算符无法执行此操作 - 它不知道Ext.form.Panel可能是什么或可能找到定义的位置。

无法读取属性“未定义的'错误的”Panel“表示不仅没有定义Ext.form.Panel，也没有定义父Ext.form命名空间对象。

Answer 2

更改行

name: 'rightdescription',

到

id: 'rightdescription',

您可以使用以下方式直接访问textarea：

var yourTextArea = Ext.getCmp ('rightdescription');
var yourTextAreaContent = yourTextArea.getValue();

Answer 3

var descAndSystem = Ext.create('Ext.form.Panel', {...})

以下是Ext.create() http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-create

的文档

至于你的其他问题......

当您说new Ext.Panel({...})时，您不再创建表单面板，因此无法使用getForm()方法。
正如@NTom所示，给任何组件id，您将能够使用Ext.getCmp访问它。 http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-getCmp

Answer 4

我想我发现了这个问题。我从他的sencha页面复制了这个例子：

http://www.sencha.com/learn/getting-started-with-ext-js-4

index.html包含ext-debug.js。当我包含ext-all-debug.js时，new运算符开始工作： - ）

感谢您的帮助。电贺启

ExtJS中的对象。 Ext.create或new运算符？

4 个答案: