评估列表中itemTpl中的函数

时间:2016-11-08 09:30:06

标签: extjs extjs6

我刚刚创建了一个包含数据的商店,然后在我的查看中创建了一个连接到该商店的列表以显示商店数据,一切正常,直到某些点我想调用函数而不是直接显示值,以便在之前对进行某些操作,我怎样才能实现这一点在 itemTpl 配置。

  

查看=> Declaration.js

Ext.define('ALNadeebApp.view.declaration.Declaration', 
{
    extend: 'Ext.panel.Panel',

    xtype: 'declaration',

    requires: [
        'ALNadeebApp.view.declaration.DeclarationController',
        'ALNadeebApp.view.declaration.DeclarationItems',
        'ALNadeebApp.view.declaration.DeclarationModel'
    ],

    fullscreen: 'true',
    getProcessingMsg: function (msg) {
        return getDeclarationProcessingStatus(msg);
    },
    title: "البيانات",

    layout: 'fit',

    cls: 'declarations',

    scrollable: 'y',

    controller: 'declaration',

    viewModel: 'declarationModel',

    items: [
        {
            xtype: 'list',
            reference: 'declarationlist',
            scrollable: 'y',
            plugins: [
                {
                    xclass: 'Ext.plugin.ListPaging',
                    autoPaging: true
                }
            ],
            itemTpl: '<div class="declaration-item">' +
             '<div class="declaration-header">' +
             '{declarationNo} : رقم البيان' +
             '</div>' +
             '<div class="right-part">' +
             ' {declarationType} : الطلب  <br>' +
             'التاريخ :{createdDate} | الوقت : {createdDate}' +
             '</div> ' +
             '<span class="declaration-status">{processingStatus}</span>' +
             '</div>',
            listeners: {
                itemtap: 'onListItemTap'
            },
            store: {
                type: 'declarationitems'
            },
            itemHeight: '100px',
            items: [
                {
                    scrollDock: 'top',
                    docked: 'top',
                    xtype: 'fieldset',
                    items: [
                        {
                            xtype: 'searchfield',
                            name: 'query',
                            placeHolder: 'ابحث برقم البيان',
                            inputCls: 'search-field'
                        },
                        {
                            xtype: 'label',
                            html: 'بحث متقدم',
                            cls: 'advanced-search-label'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    scrollDock: 'bottom',
                    docked: 'bottom',
                    text: 'المزيد ...',
                    handler: 'onLoadMoreTabed'
                }]
        }
    ]
});
  

Store =&gt; DeclarationItems.js

/**
 * Created by M.Shebl on 10/16/2016.
 */
Ext.define('ALNadeebApp.view.declaration.DeclarationItems', {
    extend: 'Ext.data.Store',
    requires: [
        'ALNadeebApp.view.declaration.DeclarationItem'
    ],
    alias: 'store.declarationitems',
    model: 'ALNadeebApp.view.declaration.DeclarationItem',

    data: [
        {"amendingByInspector":false,"containerFlag":"\u0000","createdBy":"5678567820120000005","createdDate":1476248246000,"declarationId":6013076,"declarationNo":"5LI41000030735","declarationPartyDTOs":[{"accountCode":"L1570","checkBox":false,"declarationUpdatedPartyDTOList":[],"forBatchUpdate":false,"forListUpdate":false,"individualFlag":false,"partyName":"منجرة كاظم","partyType":"IM","selected":false},{"checkBox":false,"declarationUpdatedPartyDTOList":[],"forBatchUpdate":false,"forListUpdate":false,"individualFlag":false,"partyName":"123","partyType":"EX","selected":false}],"declarationProvisionalNo":"201610128674","declarationStatus":"SUB","declarationType":"IMP","harbourFlag":false,"inspectionOffshore":"\u0000","onsiteInspectionApproval":"\u0000","processingStatus":"PIN","reuseNumber":false,"rownum_":1,"rulesResult":false,"statisticalDeclaration":"\u0000","strategicGoodsFlag":"\u0000","submittedDate":1476248277000,"version":0,"wsDeclarationBillOfLadingDTO":{"billOfLadingId":5994648,"blDetailsPopulatedFromManifest":false,"carrierInfoDTOList":[{"carrierNationality":"QA - QATAR","carrierNationalityArabic":"QA - قطر","carrierNo":"12320151729","chassisNo":"12345672015172935","driverName":"احفثسف","driverNationality":"QA - QATAR","driverNationalityArabic":"QA - قطر","gatePassNumber":"2123","selectedModelRow":0}],"countryOfLoading":"AF - AFGHANISTAN","countryOfLoadingArabic":"AF - أفغانستان","declarationId":6013076,"finalDestination":"QA - QATAR","finalDestinationArabic":"QA - قطر","isFinalDestinationBlankInManifest":false,"isPortOfLoadingBlankInManifest":false,"noOfPackages":1,"noOfPackagesUom":"BAG","showPopupBtn":false}},
        {"amendingByInspector":false,"containerFlag":"\u0000","createdBy":"5678567820120000005","createdDate":1475748148000,"declarationId":6012889,"declarationNo":"5LI41000030618-1","declarationPartyDTOs":[{"accountCode":"1003","checkBox":false,"declarationUpdatedPartyDTOList":[],"forBatchUpdate":false,"forListUpdate":false,"individualFlag":false,"partyName":"Clearing Agency A","partyType":"IM","selected":false},{"checkBox":false,"declarationUpdatedPartyDTOList":[],"forBatchUpdate":false,"forListUpdate":false,"individualFlag":false,"partyName":"tamer-test-amendment","partyType":"EX","selected":false}],"declarationProvisionalNo":"201610068487","declarationStatus":"SUB","declarationType":"IMP","harbourFlag":false,"inspectionOffshore":"\u0000","onsiteInspectionApproval":"\u0000","processingStatus":"PIN","reuseNumber":false,"rownum_":2,"rulesResult":false,"statisticalDeclaration":"\u0000","strategicGoodsFlag":"\u0000","submittedDate":1475748261000,"version":0,"wsDeclarationBillOfLadingDTO":{"billOfLadingId":5994492,"blDetailsPopulatedFromManifest":false,"carrierInfoDTOList":[{"carrierNationality":"QA - QATAR","carrierNationalityArabic":"QA - قطر","carrierNo":"12320151729","chassisNo":"12345672015172935","driverName":"احفثسف","driverNationality":"QA - QATAR","driverNationalityArabic":"QA - قطر","gatePassNumber":"2123","selectedModelRow":0}],"countryOfLoading":"IT - ITALY","countryOfLoadingArabic":"IT -  إيطاليا","declarationId":6012889,"finalDestination":"QA - QATAR","finalDestinationArabic":"QA - قطر","isFinalDestinationBlankInManifest":false,"isPortOfLoadingBlankInManifest":false,"noOfPackages":1,"noOfPackagesUom":"KG","portOfLoading":"ITQCM - Como","portOfLoadingArabic":"ITQCM - Como","portOfLoadingType":"A","showPopupBtn":false}}
    ]
});

2 个答案:

答案 0 :(得分:1)

您可以将格式化功能作为模板的一部分附加:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.Viewport.add({
            xtype: 'list',
            itemTpl: ['{name:this.doIt}', {
                doIt: function(v) {
                    return v + ' go';
                }
            }],
            store: {
                fields: ['name'],
                data: [{
                    name: 'A'
                }]
            }
        });
    }
});

小提琴here

答案 1 :(得分:0)

itemTpl: Ext.create('Ext.XTemplate',
            '<tpl for=".">',
            '{[this.formatValue(values.price)]} ...',
            '</tpl>', {
            formatValue: function(v) {
                return v + ' €';
            }
        })
}