nested formbind

by brian428

CoffeeScript

Ext.onReady ->
  i = 0
  obj1 =
    key1: "obj1Key1"
    key2: "obj1Key2"
    key4: "obj1Key3"
    sub1:
      subA: "subA"
      subB: "subB"      

  obj2 =
    key1: "obj2Key1"
    key2: "obj2Key2"
    key5: "obj2Key3"
    sub1:
      subC: "subC"
      subD: "subD"      


  Ext.merge obj1, obj2
  console.log [obj1, obj2]
  new Ext.form.Panel(
    renderTo: document.body
    items: [
      xtype: "button"
      text: "Add Container"
      handler: (btn) ->
        container = btn.up("form").down("#innerFieldContainer2")
        container.add
          xtype: "container"
          itemId: "textFieldContainer"
          width: 500
          height: 500

    ,
      xtype: "button"
      text: "Add Field"
      handler: (btn) ->
        container = btn.up("form").down("#textFieldContainer")
        valueField = btn.up("form").down("#valueField")
        container.remove valueField
        container.insert 0,
          itemId: "valueField"
          xtype: "textfield"
          fieldLabel: "Field " + (i++)
          allowBlank: false

    ,
      xtype: "button"
      text: "Submit"
      formBind: true
    ,
      xtype: "container"
      itemId: "outerFieldContainer"
      width: 500
      height: 500
      items: [
        xtype: "container"
        itemId: "innerFieldContainer2"
        width: 500
        height: 500
      ]
    ]
  )