使用Ext JS Designer從XmlStore填充組合

Question

我正在嘗試使用來自Xml文件的數據加載Combo的簡單（菜鳥）樣例。 這是我的xml：

<?xml version="1.0" encoding="UTF-8"?>
  <accounts>
 <account> 
  <name>Savings Account</name>
  <id>1</id>
 </account>
<account> 
  <name>Current Account</name>
  <id>2</id>
 </account>
</accounts>

當我配置並添加XmlStore時，它將報告找到2條記錄。

這是XmlStore的代碼：

cteo = Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
    cfg = cfg || {};
    cteo.superclass.constructor.call(this, Ext.apply({
        storeId: 'cteo',
        url: 'cteo.xml',
        record: 'account',
        data: '',
        fields: [
            {
                name: 'name',
                mapping: 'name'
            },
            {
                name: 'id',
                mapping: 'name'
            }
        ]
    }, cfg));
    }
 });
new cteo();

最后，這是組合的代碼：

MyPanelUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
width: 400,
height: 250,
initComponent: function() {
    this.items = [
        {
            xtype: 'label',
            text: 'Cuenta Origen'
        },
        {
            xtype: 'combo',
            store: 'cteo',
            displayField: 'name',
            valueField: 'id'
        }
    ];
    MyPanelUi.superclass.initComponent.call(this);
    }
});

一定很簡單，但是我被困住了...

Answer 1

這不會做任何事情：

store: 'cteo',

您需要傳入之前分配的對象引用，而不是字符串：

store: cteo,

或者，您可以調用Ext.StoreMgr.lookup('cteo') ，但是從您的代碼來看，我認為變量引用是您的意圖。

對您的代碼發表評論。 這樣做：

cteo = Ext.extend(Ext.data.XmlStore, {
...
cteo();

...有點奇怪，並且很可能在窗口范圍內創建了一個全局變量（假設cteo在更早的位置未定義為var）。 將其視為定義自定義類，然后創建您定義的類的新實例。 另外，考慮一下您的命名-商店子類應該是商店的特定類型，這在名稱中應該顯而易見。 通常，您的代碼應如下所示：

Ext.ns('MyNamespace');

MyNamespace.CteoStore = Ext.extend(Ext.data.XmlStore, {
...
});
var cteoStore = new CteoStore();

哦，是的，另一件事。 您無需僅出於提供默認配置的目的而覆蓋構造函數。 只要這樣做：

MyNamespace.CteoStore = Ext.extend(Ext.data.XmlStore, {
    storeId: 'cteo',
    url: 'cteo.xml',
    record: 'account',
    data: '',
    fields: [
        {
            name: 'name',
            mapping: 'name'
        },
        {
            name: 'id',
            mapping: 'name'
        }
    ]
});

這也更加有用，因為與您的示例不同，這些配置是可覆蓋的。 這使其更具可重用性（例如，如果您想為另一個實例分配不同的ID）。

Answer 2

在sencha網站上查看此線程：

http://www.sencha.com/forum/showthread.php?105818-(noob)-Populating-combo-from-XmlStore-with-Ext-js-designer