开发学院网页设计JavaScript ExtJs实践:支持返回Json格式的ComboBox 阅读

ExtJs实践:支持返回Json格式的ComboBox

 2009-09-09 00:00:00 来源:WEB开发网   
核心提示: 同时也要对FormPanel进行如下改造,同样增加一个是否是Json格式的属性和一个获取表单Json格式字符串的方法:JsonForm=Ext.extend(Ext.form.FormPanel,{isJsonFormat:true,getJsonString:function(){varf=t

同时也要对FormPanel进行如下改造,同样增加一个是否是Json格式的属性和一个获取表单Json格式字符串的方法:

JsonForm = Ext.extend(Ext.form.FormPanel, { 
      isJsonFormat: true, 
      getJsonString: function() { 
        var f = this; 
        var values = f.form.getValues(); 
        if (this.isJsonFormat === true) { 
          f.items.each(function(c) { 
            if (c.isJsonFormat === true) { 
              values[c.getName()] = c.getJson(); 
            } 
          }, f); 
        } 
        var data = Ext.util.JSON.encode(values); 
        return data; 
      } 
    });

使用方法如下,注意,JsonCombobox只需要定义一个Name属性就可以了:

    Ext.onReady(function() { 
      Ext.QuickTips.init(); 
      var store = new Ext.data.ArrayStore({ 
        fields: ['Id', 'Name'], 
        data: [['1', '产品分类一'], ['2', '产品分类二']] 
      }); 
      var form = new JsonForm({ 
        labelWidth: 75, 
        frame: true, 
        title: 'JsonComboBox', 
        bodyStyle: 'padding:5px 5px 0', 
        width: 350, 
        defaults: { width: 230 }, 
        defaultType: 'textfield', 
        items: [ 
        { fieldLabel: '产品Id', 
          name: 'Id' 
        }, { fieldLabel: '产品名称', 
          name: 'Name' 
        }, new JsonComboBox({ 
          fieldLabel: '产品分类', 
          name: 'Category', 
          store: store, 
          displayField: 'Name', 
          mode: 'local', 
          valueField: 'Id' 
        }) 
], 
        buttons: [{ 
          text: '保存', 
          handler: function() { 
            var values = form.getJsonString(); 
            alert(values); 
          } 
        } 
] 
      }); 
      form.render(document.body); 
    }); 

看看字符串是不是我们需要的格式:

ExtJs实践:支持返回Json格式的ComboBox

图片看不清楚?请点击这里查看原图(大图)。 

上一页  1 2 3 

Tags:ExtJs 实践 支持

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接