綁定網格和窗體ExtJs 6

我有一個網格從視圖模型（來自Java restful web服務的Ajax代理數據）填充記錄。當我在打開的網格窗體中選擇一條記錄並顯示字段時。記錄可以使用表單編輯。我有一個綁定到商店的標籤字段，每當用戶選擇一條記錄時，我應該能夠填充與記錄關聯的數據。綁定網格和窗體ExtJs 6

"data" : [ { 
"createdOn" : 1475678859000, 
"updatedOn" : 1475679885000, 
"updatedBy" : null, 
"id" : 174, 
"userName" : "ffff, 
"firstName" : "gg", 
"lastName" : "ggg", 

"salesDepartment" : [ { 
    "id" : 3, 
    "code" : "FC", 
    "name" : "Fiat-Chrysler", 
    "departmentHead" : "xxx", 
    "applicationCode" : null} ],}

我需要綁定銷售部門對象的id值。我怎麼能做到這一點。請幫幫我。

{xtype: 'tagfield', 
    anchor: '100%', 
    reference: 'salesDept', 
    fieldLabel: 'Sales Dept\'s', 
    name: 'salesDepartment', 
    allowBlank: false, 
    displayField: 'name', 
    valueField: 'id', 
    bind: { 
      value: '{record.salesDepartmentIds}', 
      store: '{SalesDepartmentStore}'}, 
      }

來源

2017-03-03 Imran

如果你可以在這裏創建快速示例fiddl e.sencha.com – pagep

這裏是小提琴：https://fiddle.sencha.com/#view/editor&fiddle/1re7 – Imran

標記字段實際上只能用於數組或逗號分隔的列表; 看起來你正在嘗試與關聯一起使用，如果有更多的支持，這將是很好的。

我已經走了，在顯示方面得到了它的工作，但保存值將取決於您如何計劃同步到服務器的值，如果你打算使用內置的代理等，那麼這將呈現出完全不同的挑戰。我想爲我自己的應用程序提供一個類似的組件，我會進一步思考，甚至可能會爲此創建一個UX。

我認爲你在這裏有幾個問題，一個是讓你的關聯正常工作，然後你需要讓你的標記字段按預期工作。

這裏是fiddle

和鍵部分是：

的擴展tagfield：

Ext.define('RelatedTagField', { 
    extend: 'Ext.form.field.Tag', 
    xtype: 'rtagfield', 
    config: { 
     relatedStore: null 
    }, 
    setValue: function (val) { 
     this.setRelatedStore(val); 
     var value; 
     if (val && val.isStore) { 
      value = val.collect('id'); 

     } else { 
      value = ''; 
     } 
     this.callParent([value]); 
    }, 
    getValue: function() { 
     return this.relatedStore; 
    }, 
    onBindStore: function() { 
     this.callParent(arguments); 

     this.on('select', function (tagfield, selection) { 
      var selectedIds = []; 
      //add any new selections 
      Ext.each(selection, function (rec) { 
       var rrec = this.relatedStore.getById(rec.id); 
       if (!rrec) { 
        this.relatedStore.add(rec.data) 
       } 
       selectedIds.push(rec.id); 
      }, this); 
      //remove any not selected anymore 
      this.relatedStore.each(function (rrec) { 
       if (selectedIds.indexOf(rrec.id) == -1) { 
        this.relatedStore.remove(rrec); 
       } 
      }, this); 
     }, this); 
    }, 

})

綁定值：

 { 
      xtype: 'rtagfield', 
      fieldLabel: 'Sales Department', 
      name: 'id', 
      displayField: 'name', 
      valueField: 'id', 
      bind: { 
       store: '{salesDepartment}', 
       value: '{record.salesDepartment}' 
      } 
     },

而加入該協會的定義：和

Ext.define('MyApp.model.User', { 
    extend: 'Ext.data.Model', 
    alias: 'model.user', 
    hasMany: [{ 
     model: 'MyApp.model.SalesDepartmentModel', 
     associationKey: 'salesDepartment', 
     role: 'salesDepartment' 
    }], 
    requires: [ 
     'Ext.data.field.String' 
    ], 

    fields: [{ 
     type: 'string', 
     name: 'userName' 
    }, { 
     type: 'string', 
     name: 'firstName' 
    }, { 
     type: 'string', 
     name: 'lastName' 
    }, { 
     name: 'salesDepartment' 
    }, { 
     name: 'roles' 
    }, { 
     type: 'string', 
     name: 'email' 
    }, { 
     name: 'notificationFrequencyId' 
    }] 
});

進一步閱讀

我建議你閱讀更多關於associations的tagfield source code

在保存記錄到服務器而言，我會建議看看sessions

來源

2017-03-06 19:09:27 Theo

你可以請看看這個http://stackoverflow.com/q/43938907/7221450或http ：//stackoverflow.com/questions/43938907/how-to-refresh-the-panels-in-a-accordion-on-change-of-records-in-a-grid-extjs – Imran

綁定網格和窗體ExtJs 6

回答

相關問題