Ext ComboBox+store数据

最新推荐文章于 2023-06-17 22:16:18 发布

原创最新推荐文章于 2023-06-17 22:16:18 发布 · 416 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何在ExtJS中配置ComboBox组件，并结合SimpleStore来加载和显示预定义的数据。示例代码展示了如何创建一个包含活动和停止选项的下拉框，以及如何设置其属性如fieldLabel、valueField和displayField。此外，还提及了一个用于加载数据的JsonStore实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var actStatus=[
            ['1','活动'],
            ['2','停止']
        ];

columnWidth:.3,
     layout:'form',
     border:false,
     labelWidth:120,
     items:[{
      fieldLabel: '活动状态',
      id:'ActStatus',
　　     name: 'test.actStatus',
      labelStyle: 'text-align:right;width:120;',
　　     hiddenName: 'test.actStatus',
　　     xtype: 'combo',
　　     store: new Ext.data.SimpleStore({
　　     fields: ['value','text'],
　　     data: actStatus //已经写好的数据
　　     }),
　　     emptyText: '请选择',
　　     mode: 'local',
　　     triggerAction: 'all',
　　     valueField: 'value',
　　     displayField: 'text',
      value : 1,
　　     readOnly: true

//下列框组数据
var test= new Ext.data.Store({
id:'test',
proxy: new Ext.data.HttpProxy({
            url: test.action'}),
   reader: new Ext.data.JsonReader({
   root: test',
   fields:['id','name']
        })
});
test.load();

columnWidth:.3,
     layout:'form',
     border:false,
     labelWidth:120,
     items:[{
      　fieldLabel: '组',
      id:'GroupCom',
　　     name: 'test.Group',
　　     hiddenName: 'test.bizGroup',
      labelStyle: 'text-align:right;width:120;',
　　     xtype: 'combo',
　　     store:test,//动态获取数据
　　     emptyText: '请选择',
　　     mode: 'local',
　　     triggerAction: 'all',
　　     valueField: 'id',
　　     displayField: 'name',
　　     readOnly: true