使用 Ext js 设计器从 XmlStore 填充组合答案

【问题标题】：Populating combo from XmlStore with Ext js designer使用 Ext js 设计器从 XmlStore 填充组合
【发布时间】：2010-07-30 14:29:43
【问题描述】：

我正在尝试使用 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);
    }
});

这一定很简单，但我卡住了......

【问题讨论】：

标签： javascript extjs

【解决方案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）。

【讨论】：

【解决方案2】：

在 sencha 网站上查看此主题：

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

【讨论】：

很好，但如果你在乎的话，我的 cmets 仍然可以站立。