Question

所以，我正在显示我从商店加载的数据列表。问题在于我的控制器中有我的参考。事实上，函数SelectionClient没有运行，因为我的refs存在问题。任何人都知道问题是什么？

UniSelect.Controller

Ext.define('UniSelect.controller.Controleur', {
extend: 'Ext.app.Controller',
requires: ['Ext.MessageBox'],    
config: {
    refs: {
        main: 'main',
        liste: 'ListeClient',
        ClientDetails: 'ClientDetails',         
    },
    control: {
        liste: {
            itemtap: 'selectionClient',
        },
    }
},    
selectionClient: function(list, index, element, record) {

    console.log('itemTap-RUNS');
},

UniSelect.Main

   var storage = Ext.create('UniSelect.store.ListeClient');

   Ext.define('UniSelect.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
     'UniSelect.view.ListeClient',
    'UniSelect.store.ListeClient',
    'UniSelect.model.ListeClient',
],
config: {
    tabBarPosition: 'bottom',

    activeItem: 1,

    items: [
        {
  //          xtype: 'carte',
        },
        {
            xtype: 'ListeClient',
            store: storage,
            grouped: true

        },
        {
            title: 'Graphique',
            iconCls: 'home',
        }
    ]
}
});

UniSelect.view.ListeClient

   Ext.define('UniSelect.view.ListeClient', {
extend: 'Ext.List',
xtype: 'ListeClient',

requires: [
           'UniSelect.store.ListeClient',
           'UniSelect.model.ListeClient',
       ],

config: {

    id: 'ListeClient',
    store: 'ListeClient',
    title: 'Produits',

    itemTpl: '<p> <b> {prenomClient} Nombre de jour restant pour  Escompte : {nbJourRabais} Echance : {nbJourEcheance} Retard : {nbJourRetard} </b> </p>'

}   
});

App.js

Ext.application({
name: 'UniSelect',

requires: ['Ext.MessageBox',],

views: ['Main','ListeClient'],

model: ['ListeClient'],  

store: ['ListeClient'],

controller: ['Controleur'],

icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
},
isIconPrecomposed: true,
startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
},

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('UniSelect.view.Main'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version. Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}
});

UniSelect.store

Ext.define('UniSelect.store.ListeClient', {
extend : 'Ext.data.Store',

requires: [

           'UniSelect.model.ListeClient',
       ],

config : {
    storeId: 'ListeClient',

    model : 'UniSelect.model.ListeClient',

    grouper : {
        sortProperty : 'nbJourRetard',
        direction : 'DESC',
        groupFn : function(record) {
            return record.get('prenomClient').substring(0, 1);
        }
    },

    sorters : [ {
        property : 'nbJourRetard',
        direction : 'DSC'
    }, {
        property : 'nbJourEcheance',
        direction : 'ASC'
    } ],

    data : [ {
        "matriculeClient" : "c001",
        "prenomClient" : "Guy",
        "nomClient" : "Belanger",
        "nbJourRabais" : "7",
        "nbJourEcheance" : 17,
        "nbJourRetard" : 4
    }, {
        "matriculeClient" : "c001",
        "prenomClient" : "Andree",
        "nomClient" : "Belanger",
        "nbJourRabais" : "7",
        "nbJourEcheance" : 17,
        "nbJourRetard" : 2
    }, {
        "matriculeClient" : "c001",
        "prenomClient" : "Jonathan",
        "nomClient" : "Belanger",
        "nbJourRabais" : "7",
        "nbJourEcheance" : 17,
        "nbJourRetard" : 1
    }, {
        "matriculeClient" : "c001",
        "prenomClient" : "Frederick",
        "nomClient" : "Belanger",
        "nbJourRabais" : "7",
        "nbJourEcheance" : 17,
        "nbJourRetard" : 0
    }, {
        "matriculeClient" : "c001",
        "prenomClient" : "Vincent",
        "nomClient" : "Belanger",
        "nbJourRabais" : "7",
        "nbJourEcheance" : 17,
        "nbJourRetard" : 0
    }, {
        "matriculeClient" : "c001",
        "prenomClient" : "Philippe",
        "nomClient" : "Belanger",
        "nbJourRabais" : "7",
        "nbJourEcheance" : 9,
        "nbJourRetard" : 0
    }]
}
});

UniSelect.model

Ext.define('UniSelect.model.ListeClient', {
extend: 'Ext.data.Model',

config: {
    fields: [
        { name: 'matriculeClient', type: 'auto' },
        { name: 'prenomClient', type: 'auto' },
        { name: 'nomClient', type: 'auto' },
        { name: 'nbJourRabais', type: 'auto' },
        { name: 'nbJourEcheance', type: 'auto' },
        { name: 'nbJourRetard', type: 'auto' }

    ]
}
});

Answer 1

我尝试使用以下代码，它可以参考。我试图模仿你的源代码。

查看：

Ext.define('UniSelect.view.ListeClient', {
    extend: 'Ext.List',
    xtype: 'listeclient',

    config: {
        title: 'Produits',
        itemTpl: '{title}',
        data: [
            { title: 'Item 1' },
            { title: 'Item 2' },
            { title: 'Item 3' },
            { title: 'Item 4' }
        ]

    }    
});

主要观点：

Ext.define('UniSelect.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'Welcome',
                iconCls: 'home',
                layout:'fit',
                xtype: 'listeclient'
            },
            {
                title: 'Get Started',
                iconCls: 'action'
            }
        ]
    }
});

控制器

Ext.define('UniSelect.controller.Controleur', {
    extend: 'Ext.app.Controller',
    requires: ['Ext.MessageBox'],
    config: {
        refs: {
            main: 'main',
            liste: 'listeclient',
            ClientDetails: 'ClientDetails'
        },
        control: {
            liste: {
                itemtap: 'selectionClient'
            }
        }
    },
    selectionClient: function() {
        console.log('itemTap-RUNS');
    }
});

在app.js中检查以下内容

views: [
        'Main', 'ListeClient'
    ],
    controllers: [
        'Controleur'
    ],

希望有所帮助

Answer 2

我终于注意到我的控制器文件没有运行。事实上，当我查看GoogleChrome webDevelopper部分中的网络标签时，我可以看到除“Controleur”文件之外的所有文件。我甚至尝试过Ctrl查找控制器文件，即使我在IDE中创建它也不存在。

Google Chrome Network Tab

非常感谢大家的帮助：）

xtypes无法在控制器中引用

2 个答案: