Sencha Touch：在商店列表中顯示另一個商店的字段

Question

我正在使用Sencha觸摸應用程序。這個應用程序有3個列表：客戶，任務和asignations。每個人都有自己的模型和商店。第三個，asignations列表是對客戶的一項任務，因此該列表必須顯示哪個任務和客戶端是指定的。

模型

Ext.define('TasksApp.model.Asignation',{ 
extend: 'Ext.data.Model', 
config: { 
    idProperty: 'id', 
    fields:  [ 
     {name: 'asignID'}, 
     {name: 'nombreasignacion', type: 'string'}, 
     {name: 'clienteasignacion', type: 'string'}, 
     {name: 'tareaasignacion', type: 'string'}, 
     {name: 'finasignacion', type: 'date'}, 
     {name: 'obsasignacion', type: 'string'}, 
     {name: 'recordatorio', type: 'string'}, 
     {name: 'estadoasignacion', type: 'string'} 
    ], 

} 
}); 


Ext.define('TasksApp.model.Client',{ 
extend: 'Ext.data.Model', 
config: { 
    idProperty: 'id', 
    fields:  [ 
     {name: 'clientID'}, 
     {name: 'nombrecliente', type: 'string'}, 
     {name: 'obscliente', type: 'string'}, 
     {name: 'tlfcliente', type: 'int'}, 
     {name: 'emailcliente', type: 'string'}, 
     {name: 'urlcliente', type: 'string'}, 
     {name: 'asigncliente', type: 'int', defaultValue: 0}  
    ], 

} 
}); 


Ext.define('TasksApp.model.Task',{ 
extend: 'Ext.data.Model', 
config: 
{ 
    idProperty: 'id', 
    fields:  [ 
     {name: 'tareaID'}, 
     {name: 'nombretarea', type: 'string'}, 
     {name: 'descripciontarea', type: 'string'}, 
     {name: 'tdesarrollotarea', type: 'int'}, 
     {name: 'asigntarea', type: 'int', defaultValue: 0} 
    ],  
} 
}); 

Asignations列表視圖+ Asignation模板

var plantillaAsignacion = new Ext.XTemplate(
'<tpl for=".">', 
'<div class="tplAsignacion">', 
    '<div class="asignacionCabecera">', 
     '<DIV ALIGN=center><B><I>{nombreasignacion}</i></B></DIV>', 
    '</div>', 
    '<div class="clienteCuerpo">', 
     '<div class="asignacionImagen" style= "float: left;"><img src="resources/images/asign_icon.png"/></div>', 
     '<ol>', 
      '<li><pre> Cliente: {clienteasignacion}</a></pre></li>', 
      '<li><pre> Tarea: {tareaasignacion}</pre></li>', 
      '<li><pre> Finalización: {finasignacion:date("d/m/Y")}<div align="right">Estado: {estadoasignacion} <span class="status {estadoasignacion}"></span> </pre></li>',  //("l, F d, Y")("d/m/Y") 
     '</ol>', 
    '</div>', 
'</div>', 
'</tpl>' 
); 

Ext.define('TasksApp.view.AsignationsList', { 
extend: 'Ext.Container', 
requires: [ 'Ext.TitleBar', 'Ext.dataview.List' ], 
alias: 'widget.asignationslistview', 

config: { 
    layout: { 
     type: 'fit', 
    }, 
    items: 
    [ 
     { 
      xtype: 'titlebar', 
      title: 'Lista de asignaciones', 
      docked: 'top', 
      items: 
      [ 
       { 
        xtype: 'button', 
        iconCls: 'add', 
        ui: 'action', 
        itemId: 'newButton', 
        align: 'right' 
       },{ 
        xtype: 'button', 
        text: 'Clientes', 
        ui: 'action', 
        itemId: 'goToClients', iconCls: 'team', 
        align: 'left' 
       }, 
       { 
        xtype: 'button', 
        text: 'Tareas', 
        ui: 'action', 
        itemId: 'goToTasks', iconCls: 'bookmarks', 
        align: 'left' 
       }, 
      ]    
     }, 
     { 
      xtype: 'list', 
      store: 'Asignations', 
      itemId: 'asignationsList',    
      cls: 'estado-asignacion', 
      loadingText: 'Cargando Asignaciones...', 
      emptyText: 'No hay asignaciones actualmente', 
      onItemDisclosure: true, 
      //grouped: true, 
      itemTpl: plantillaAsignacion, 
     } 
    ], 
    listeners: 
    [ 
     { 
      delegate: '#newButton', 
      event: 'tap', 
      fn: 'onNewButtonTap' 
     }, 
     { 
      delegate: '#asignationsList', 
      event: 'disclose', 
      fn: 'onAsignationsListDisclose' 
     }, 
     { 
      delegate: '#goToClients', 
      event: 'tap', 
      fn: 'onGoToClients' 
     }, 
     { 
      delegate: '#goToTasks', 
      event: 'tap', 
      fn: 'onGoToTasks' 
     }   
    ] 
}, 
onNewButtonTap: function() { 
    console.log('newAsignationCommand'); 
    this.fireEvent('newAsignationCommand', this); 
}, 
onAsignationsListDisclose: function (list, record, target, index, evt, options) { 
    console.log('editAsignationCommand'); 
    this.fireEvent('editAsignationCommand', this, record); 
}, 
onGoToClients: function() { 
    console.log ('goToClientsCommand'); 
    this.fireEvent('goToClientsCommand', this); 
}, 
onGoToTasks: function() { 
    console.log ('goToTasksCommand'); 
    this.fireEvent('goToTasksCommand', this); 
} 
}); 

Asignation編輯器視圖（形式asignation的）

Ext.define('TasksApp.view.AsignationEditor', { 
extend: 'Ext.form.Panel', 
requires: [ 
    'Ext.TitleBar', 'Ext.form.FieldSet', 'Ext.field.Text','Ext.field.Select', 'Ext.field.DatePicker', 'Ext.field.TextArea','Ext.form.Panel'  
], 
alias: 'widget.asignationeditorview', 
config: { 
    scrollable: 'vertical', 
    items: 
    [ 
     { 
      xtype: 'titlebar', 
      docked: 'top', 
      title: 'Editar Asignación', 
      items: 
      [ 
       { 
        xtype: 'button', 
        ui: 'back', 
        text: 'Volver', 
        itemId: 'backButton', 
        align: 'left' 
       }, 
       { 
        xtype: 'button', 
        ui: 'action', 
        text: 'Guardar', 
        itemId: 'saveButton', 
        align: 'right' 
       } 
      ] 
     }, 
     { 
      xtype: 'toolbar', 
      docked: 'bottom', 
      items: [ 
       { 
        xtype: 'button', 
        iconCls: 'trash', 
        iconMask: true, 
        itemId: 'deleteButton' 
       } 
      ] 
     }, 
     { 
      xtype: 'fieldset', 
      items: 
      [ 
       { 
        xtype: 'textfield', 
        name: 'nombreasignacion', 
        label: 'Nombre', 
        required: true, 
        autoCapitalize: true, 
        placeHolder: 'Nombre de la asignación...' 
       }, 
       { 
        xtype: 'selectfield', 
        name: 'clienteasignacion',  
        label: 'Cliente', 
        valueField: 'clientID', 
        displayField: 'nombrecliente', 
        store: 'Clients',  
        autoSelect: false, 
        placeHolder: 'Seleccione un cliente...', 
        required: true, 
       }, 
       { 
        xtype: 'selectfield', 
        name: 'tareaasignacion', 
        label: 'Tarea', 
        valueField: 'tareaID', 
        displayField: 'nombretarea', 
        store: 'Tasks', 
        autoSelect: false, 
        placeHolder: 'Seleccione una tarea...', 
        required: true, 

       },  
       { 
        xtype: 'datepickerfield', 
        name: 'finasignacion', 
        label: 'Vencimiento', 
        dateFormat: 'd/m/Y', 
        value: (new Date()), 

        picker: 
        { 
         yearFrom: new Date().getFullYear(), 
         yearTo: 2040, 
         slotOrder: [ 'day', 'month', 'year' ] 
        } 
       }, 
       { 
        xtype: 'textareafield', 
        name: 'obsasignacion', 
        label: 'Observaciones', 
        autoCapitalize: true, 
        autoCorrect: true, 
        placeHolder: 'Observaciones de la asignación...', 
        maxRows: 5 
       }, 
       { 
        xtype: 'selectfield', 
        name: 'recordatorio', 
        label: 'Recordatorio', 
        autoSelect: true, 
        placeHolder: 'Seleccione el método recordatorio...', 
        required: true, 
        options: 
        [ 
         { 
          text: 'Ninguno', 
          value: 0 
         }, 
         { 
          text: 'eMail', 
          value: 2        
         }, 
         { 
          text: 'SMS', 
          value: 1 
         }, 
         { 
          text: 'Notificación', 
          value: 3 
         }       
        ] 
       }, 
       { 
        xtype: 'selectfield', 
        name: 'estadoasignacion', 
        label: 'Estado', 
        autoSelect: true, 
        placeHolder: 'Seleccione el estado...', 
        required: true, 
        options: 
        [ 
         { 
          text: 'Activa', 
          value: 'Activa' 
         }, 
         { 
          text: 'Caducada', 
          value: 'Caducada'       
         }, 
         { 
          text: 'Cancelada', 
          value: 'Cancelada' 
         }, 
         { 
          text: 'Realizada', 
          value: 'Realizada' 
         }       
        ] 
       }, 
      ]     
     } 
    ], 
    listeners: [ 
     { 
      delegate: '#saveButton', 
      event: 'tap', 
      fn: 'onSaveButtonTap' 
     }, 
     { 
      delegate: '#deleteButton', 
      event: 'tap', 
      fn: 'onDeleteButtonTap' 
     }, 
     { 
      delegate: '#backButton', 
      event: 'tap', 
      fn: 'onBackButtonTap' 
     } 
    ] 
}, 
onSaveButtonTap: function() { 
    console.log('saveAsignationCommand'); 
    this.fireEvent('saveAsignationCommand', this); 
}, 
onDeleteButtonTap: function() { 
    console.log('deleteAsignationCommand'); 
    this.fireEvent('deleteAsignationCommand', this); 
}, 
onBackButtonTap: function() { 
    console.log('backToHomeCommand'); 
    this.fireEvent('backToHomeCommand', this); 
} 
}); 

Asignation控制器

Ext.define('TasksApp.controller.Asignations', { 

extend: 'Ext.app.Controller', 

config: { 
    refs: { 
     asignationsListView: 'asignationslistview', 
     asignationEditorView: 'asignationeditorview' 
    }, 
    control: { 
     asignationsListView: { 
      newAsignationCommand: 'onNewAsignationCommand', 
      editAsignationCommand: 'onEditAsignationCommand' 
     }, 
     asignationEditorView: { 
      saveAsignationCommand: 'onSaveAsignationCommand', 
      deleteAsignationCommand: 'onDeleteAsignationCommand', 
      backToHomeCommand: 'onBackToHomeCommand' 
     } 
    } 
}, 

getSlideLeftTransition: function() { 
    return { type: 'slide', direction: 'left' }; 
}, 

getSlideRightTransition: function() { 
    return { type: 'slide', direction: 'right' }; 
}, 

getRandomInt: function (min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
}, 

activateAsignationEditor: function (record) { 

    var asignationEditorView = this.getAsignationEditorView(); 
    asignationEditorView.setRecord(record); // load() is deprecated. 
    Ext.Viewport.animateActiveItem(asignationEditorView, this.getSlideLeftTransition()); 
}, 

activateAsignationsList: function() { 
    Ext.Viewport.animateActiveItem(this.getAsignationsListView(), this.getSlideRightTransition()); 
}, 

onNewAsignationCommand: function() { 

    console.log('onNewAsignationCommand'); 

    var now = new Date(); 
    var asignationId = (now.getTime()).toString() + (this.getRandomInt(0, 100)).toString(); 

    var newAsignation = Ext.create('TasksApp.model.Asignation', { 
     id: asignationId, 
     nombreasignacion: '', 
     clienteasignacion: '', 
tareaasignacion: '', 
finasignacion: '', 
obsasignacion: '', 
recordatorio: '', 
estadoasignacion: '' 
    }); 

    this.activateAsignationEditor(newAsignation); 

}, 

onEditAsignationCommand: function (list, record) { 

    console.log('onEditAsignationCommand'); 
    this.activateAsignationEditor(record); 
}, 

onSaveAsignationCommand: function() { 

    console.log('onSaveAsignationCommand'); 

    var asignationEditorView = this.getAsignationEditorView(); 
    var currentAsignation = asignationEditorView.getRecord(); 
    var newValues = asignationEditorView.getValues(); 

    currentAsignation.set('nombreasignacion', newValues.nombreasignacion); 


    currentAsignation.set('clienteasignacion.nombrecliente', newValues.clienteasignacion); 
    currentAsignation.set('tareaasignacion.nombretarea', newValues.tareaasignacion); 
    currentAsignation.set('finasignacion', newValues.finasignacion); 
    currentAsignation.set('obsasignacion', newValues.obsasignacion); 
    currentAsignation.set('recordatorio', newValues.recordatorio); 
    currentAsignation.set('estadoasignacion', newValues.estadoasignacion); 


    var asignationsStore = Ext.getStore('Asignations'); 

    if (null == asignationsStore.findRecord('id', currentAsignation.data.id)) { 
     asignationsStore.add(currentAsignation); 
    } 

    asignationsStore.sync(); 

    asignationsStore.sort([{ property: 'dateCreated', direction: 'DESC'}]); 

    this.activateAsignationsList(); 
}, 

onDeleteAsignationCommand: function() { 

    console.log('onDeleteAsignationCommand'); 

    var asignationEditorView = this.getAsignationEditorView(); 
    var currentAsignation = asignationEditorView.getRecord(); 
    var asignationsStore = Ext.getStore('Asignations'); 

    asignationsStore.remove(currentAsignation); 
    asignationsStore.sync(); 

    this.activateAsignationsList(); 
}, 

onBackToHomeCommand: function() { 

    console.log('onBackToHomeCommand'); 
    this.activateAsignationsList(); 
}, 

launch: function() { 
    this.callParent(arguments); 
    var asignationsStore = Ext.getStore('Asignations'); 
    asignationsStore.load(); 
    console.log('launch'); 
}, 
init: function() { 
    this.callParent(arguments); 
    console.log('init'); 
} 
}); 

我希望asignations列表顯示客戶端名稱（nombrecliente）和任務名稱（nombretarea），但它什麼也沒有顯示。我不知道如何引用這個值，以便列表顯示它們。我試圖修改asignations控制器，selectfield int asignation編輯器（窗體）和asignations模板，但我根本不知道這是如何工作的，我必須做什麼來顯示這些值（如果它們保存在asignations此時通過selectfield存儲，還是我做錯了什麼？）

我將不勝感激任何幫助。先謝謝你。 PS：對不起，我的英語，這不是我的母語:)

Answer 1

請在鍵值對與主要名稱作爲模型場創建數組，然後設置數據到ASIGN Asignations店，如：

Asignations.setdata({fieldName:"value"});