Extjs中Form表单combobox重置后初始化值为空问题解决

标签： extjsreferencefilterfunctionlayoutobject

2011-06-23 11:34 5865人阅读 评论(0) 收藏 举报

 分类：

 

ExtJs（19） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

【问题描述】：

     有些时候Ext.form.FromPanel中的组件都写好了，但是初始化的时候需要给组件填写初始值，例如combobox，textarea等。

     可以使用Ext.getCmp('combobox元素的id号').setValue('value');来设置初始值。但是这样设置初始值有个问题，就是如果form.reset();设置初始值的combobox就会被清空。

 

【原因分析】：

      因为form最初被实例化的时候，combobox是没有值的。

【解决方法】：

    此时在reset前，增加一句话，即可保证reset到正确的值：  Ext.getCmp('combobox元素的id号').originalValue = value;

 

      在本人的使用过程中还发现另外一个问题，采用上面的方法貌似是解决了初始化为空值的问题，但是却发现当点击其他页面再返回到该页面时combobox表单元素标签名显示重复，但下拉选择框不见了，每次弹出该表单窗口页面combobox表单元素标签名就多一个显示出来。

      查看API，发现combobox存在多个ID：

 An itemId can be used as an alternative way to get a reference to a component
     * when no object reference is available.  Instead of using an {@link #id} with
     * {@link Ext}.{@link Ext#getCmp getCmp}, use itemId with
     * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
     * itemId's or {@link #id}'s. Since itemId's are an index to the
     * container's internal MixedCollection, the itemId is scoped locally to the container --
     * avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a unique
     * {@link #id}.

    抱着尝试的态度：

•     修改id为itemid，
•     Ext.getCmp('combobox元素的id号').setValue('value');修改为Ext.Container.getComponent('combobox元素的itemid号').originalValue = value;

     最终上面重复问题是解决了，但是却发现重置失效了。最后注释掉Ext.Container.getComponent('combobox元素的itemid号').originalValue = value; 行代码居然啥事都没了，就一个itemid搞定撒了。

 

部分代码如下：

 //formUI：表单窗口对象（同事自定义的具有表单和窗口特性的）

//formpanel：表单面板FormPanel对象

//点击“新增”按钮弹出表单窗口界面

function add() {

         formUI.show("新增");
       // Ext.Container.getComponent('combobox_type').originalValue = "fieldtype";
       // Ext.getCmp('combobox_type').originalValue = "fieldtype";

        formpanel.getForm().reset();

         }

 

//在Grid列表中一行记录上单击弹出表单窗口界面，对应记录中的值设置到表单中

   gridUI.on("cellclick",function(di,record,grid, rowIndex, colIndex, e){

         formUI.show("编辑");

         formpanel.getForm().setValues(record.data);
            });

 

//表单中对应Combobox元素脚本：

{
     layout : 'form',
     labelWidth : 60,
     labelAlign : 'right',
                    colspan : 2,
     items : {
                        itemid:'combobox_type',
      xtype : 'combo',                                        //注意：Extjs版本是3.3
      fieldLabel : '扩展类型',
      width : 150,
      hiddenName : 'extensiontype',
      colspan : 2,
      store : new Ext.data.SimpleStore({
         fields : ['name', 'value'],
         data : [["字段类型", "fieldtype"], ["分词器", "tokenizer"],["Filter过滤器","filter"],["文本处理","textprocess"],["文件解析","fileparser"],["积分策略","similarity"]]
        }),
      editable : false,
      displayField : 'name',
      value : 'fieldtype',
      valueField : 'value',
      typeAhead : true,
      mode : 'local',
      forceSelection : true,
      triggerAction : 'all',
      selectOnFocus : true
     }
    }