日期:2014-05-16  浏览次数:20447 次

为ExtJS combobox设定默认选项

下拉框预选某个常用的选项是常见的需求,用HTML的select控件实现该功能十分简单,但是用ExtJS的combobox来实现该功能还需费一番周折。主要的思路是:

  1. 定义一个自动加载(autoLoad: true)的store,这样就可以保证在用户没有和combobox交互之前,选项数据已可用。
  2. 在store加载完成后找到需要预设的数据项,然后调用combobox的setValue()方法。

以下是一个可行的实现示例:

?

/* define the store */
var stDataSources = new Ext.data.JsonStore(
  { root: 'dataSources',
    totalProperty: 'total',
    idProperty: 'datadir',
    id:'datadir',
    autoLoad: true,
    remoteSort: false,
    fields: [
      {name: 'datadir', type: 'string'},
      {name: 'label', type: 'string'}
    ],
    baseParams: {usr: usr, pwd: pwd, org: org},
    sortInfo: {field: 'label', direction: 'ASC'},
    proxy: new Ext.data.HttpProxy({
      url: 'cgi/get-datasources.cgi'
    })
});

/* define the combobox field */
{ 
          fieldLabel:'Use data from',
          name: 'new_datasrc',
          id: 'cmbData',
          hiddenName: 'new_datasrc',
          hiddenId: 'new_datasrc',
          xtype: 'combo',
          triggerAction: 'all',
          allowBlank: false,
          forceSelection: true,
          mode: 'local',
          store: stDataSources,
          displayField:'label',
          valueField: 'datadir',
          typeAhead: true,
          forceSelection: true,
          selectOnFocus: true,
          minChars: 2,
          tooltipText: "Select Data Source.",
          listeners: {
            render: function(c) {
              c.getStore().on("load", function(s, r, o) {
                c.setValue(r[0].get('datadir'));
              });
            }
          }
        }

?该例子中设置预设选项实在render事件处理函数注册store的load事件处理例程来实现的。render事件通常要比store的load事件更早发生,这样就能保证正确的时序。另外一个办法是在combobox的show事件中直接从store取到预设选项并调用combobox的setValue方法:

?

          listeners: {
            show: function(c) {
              c.setValue(c.getStore().getAt(0).get('datadir'));
          }

?然而,combobox的show事件经常没有触发。