1. #1
    Touch Premium Member
    Join Date
    Nov 2011
    Vote Rating
    dhanashree is on a distinguished road


    Default UX component in Architect

    Here is what I am doing:

    I am trying to use a UX Multiselect inside my architect MVC project.
    1) I set the loader path like so
    enabled: true,
    paths: {
    EXT: '.',
    'Ext.ux': 'resources/lib/ux'
    2) Created a container
    Ext.define('APP.view.MultiSelectListBox', {
    extend: 'Ext.container.Container',
    alias: 'widget.multiselectlistbox',

    requires: [

    height: 50,
    layout: {
    type: 'fit'

    initComponent: function() {
    var me = this;


    3) Created the override (this is where, I think I am missing something or doing something wrong)

    Ext.define('APP.view.override.MultiSelectListBox', {
    override: 'APP.view.MultiSelectListBox',

    initComponent: function() {
    var me = this;

    Ext.apply(me, {
    items: [{xtype: 'multiselect'}]


    4) Created a field in one of my forms by doing this. I tried setting the store config to one of my app stores, that didn't work. So tried with data object instead, that doesn't work either.
    xtype: 'multiselectlistbox',
    flex: 1,
    displayField: 'DMGD_DESC',
    valueField: 'DMGD_CD',
    store: 'VisibleDamage'

    I get the following error in the initComponent of the Multiselect.js
    TypeError: me.store is null
    [IMG]chrome://firebug/content/blank.gif[/IMG] if (me.store.autoCreated) {

    Can somebody help? I have to search all over regarding using UX components in architect, but so far none has helped.
    And yes, I am relatively new to Sencha, and more so with Architect.

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Guatemala, Central America
    Vote Rating
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough



    Your problem is that UX component expects in store an instance of store, not the storeId.

    Other custom components of ExtJS handles both: If storeId is provided they look for it in store manager.

    Find where is used the store in the UX's component code and do the same as other ExtJS components: If store is an string look for the actual store in store manager, for example:

        getStore: function() {
            var me = this;
            if (!me.store) {
                me.store = Ext.data.StoreManager.lookup(me.storeId);
            return me.store;
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

Thread Participants: 1