带有 Radiogroup 的 Extjs答案

【问题标题】：Extjs with Radiogroup带有 Radiogroup 的 Extjs
【发布时间】：2011-07-30 09:32:17
【问题描述】：

我们可以将静态 json 存储与 ext 中的 radiogroup 绑定吗？

【问题讨论】：

你必须比这更具体。 “绑定”是什么意思？它们通常没有直接关系。您想为商店中的每件商品显示额外的单选按钮吗？还是..？
是的，基于静态 json 存储（名称值对）它应该显示单选按钮组

【解决方案1】：

Radiogroups 和 Stores 在 ExtJS 中没有直接关系。从存储中填充表单值很容易，但是使用存储来实际创建字段需要一些工作。具体来说，你必须做这样的事情（假设 Ext 3.3.1），并且你的 JsonStore 已经设置好了......

var store = <your predefined store, with records>;
var itemsInGroup = [];

store.each( function(record) {
  itemsInGroup.push( {
      boxLabel: record.someLabel, 
      name: record.someName, 
      inputValue: record.someValue
    });  
});

var myGroup = { 
  xtype: 'radiogroup', 
  fieldLabel: 'My Dynamic Radiogroup', 
  items: itemsInGroup 
};

【讨论】：

但是如果我只是重新加载存储值并且我希望将这些值填充到复选框组中怎么办？这种方式我试过了，还是不行……有没有另一种方法可以动态改变复选框组项？

【解决方案2】：

您可以使用 dataView 进行此操作。根据商店价值，您可以添加单选按钮。假设您的商店有 5 个商品，那么将显示 5 个单选按钮。

    var tpl = new Ext.XTemplate('<tpl for=".">', '<div class="thumb-wrap" style="width:210px; float: left;">', '<label >', '<tpl>', '<input type=radioField value={fieldId} >', '</tpl>', '{dataViewFieldName}', '</label>', '</div>', '</tpl>', {            
    });
    var me = this;

this.items = new Ext.DataView({
        store: this.store,
        tpl: tpl,            
        overClass: 'x-view-over',
        itemSelector: 'div.thumb-wrap',           
        autoScroll: true            
    });
    this.callParent();
},

【讨论】：