Results 1 to 6 of 6

Thread: What is the best way to attach a DataItem class to a DataView using Architect?

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    18
    Vote Rating
    2
      0  

    Default What is the best way to attach a DataItem class to a DataView using Architect?

    After setting useComponents to True and changing the defaultType to an existing DataItem class, Architect throws this error: Uncaught TypeError: Cannot call method 'substring' of undefined

    When running the project, this error occurs:
    Error: [ERROR][Ext.Container#setDefaultType] Invalid defaultType of: 'channellayout', must be a valid component xtype

    Sencha doesn't seem to be recognizing the DataItem class. I would love to see an updated example of implementing a DataItem using Architect.

    DataView
    Code:
    {
         xtype: 'dataview',
         defaultType: 'channellayout',
         store: 'MediaStackImporter',
         useComponents: true
    }
    DataItem
    Code:
    Ext.define('MyApp.view.ChannelLayout', {
        extend: 'Ext.dataview.component.DataItem',
        alias: 'widget.channellayout',
    
    
        config: {
            items: [
                {
                    xtype: 'container',
                    height: '2em',
                    id: 'ChannelLabel',
                    padding: '0.25em',
                    style: 'color: #5a5a5a; font-size: 0.8em; font-weight: bold;'
                },
                {
                    xtype: 'container',
                    height: '6em',
                    id: 'ChannelItems',
                    layout: {
                        type: 'vbox'
                    }
                }
            ]
        },
    
    
        updateRecord: function(record) {
            // Provide an implementation to update this container's child items
            console.log(record.channelsName);
        }
    
    
    });

  2. #2
    Sencha User
    Join Date
    Mar 2013
    Posts
    18
    Vote Rating
    2
      0  

    Default

    I've spent most of the day trying to put together similar example using DataItem and DataView as used in the latest Kiva repository: https://github.com/SenchaArchitect/Kiva

    I am still getting the same errors as mentioned above. What is really confusing is that the setup above matches the new Kiva example.

    DataItem
    Code:
    Ext.define('Kiva.view.LoansListItem', {
        extend: 'Ext.dataview.component.DataItem',
        alias: 'widget.loanslistitem',
    
    
        requires: [
            'Kiva.view.LoansListItemCompletion'
        ],
    
    
        config: {
            cls: 'x-list-item',
            layout: {
                type: 'vbox'
            },
            items: [
                {
                    xtype: 'component',
                    cls: 'name',
                    itemId: 'name'
                },
                {
                    xtype: 'component',
                    cls: 'use',
                    itemId: 'use'
                },
                {
                    xtype: 'image',
                    docked: 'left',
                    itemId: 'avatar'
                },
                {
                    xtype: 'loanslistitemcompletion',
                    docked: 'right',
                    itemId: 'completion'
                }
            ]
        },
    
    
        updateRecord: function(record) {
            // Provide an implementation to update this container's child items
            this.down('#name').setHtml(record.get('name'));
            this.down('#use').setHtml(record.get('use'));
            this.down('#avatar').setSrc(record.get('image'));
            this.down('#completion').setPercentFunded(record.get('percent_funded'));
        }
    
    
    });
    DataView
    Code:
    Ext.define('Kiva.view.LoansList', {
        extend: 'Ext.dataview.DataView',
        alias: 'widget.loanslist',
    
    
        config: {
            ui: 'loans',
            deselectOnContainerClick: false,
            defaultType: 'loanslistitem',  // <- Matches the alias
            store: 'Loans',
            useComponents: true,
            refreshed: [
                '["[\\\'false\\\']"]'
            ]
        },
    
    ...
    I see nothing spectacular here, so I'm at a loss why the same errors aren't thrown when loading the Kiva project in Architect?

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    18
    Vote Rating
    2
      0  

    Default Just figured this out.

    I'm not sure if this is a bug in Architect, but I just figured out why I was getting the error - and it has nothing to do with the written code. It has everything to do with the order the components are in the Project Inspector. The DataItem has to be above the DataView that references it.

    CORRECTION:
    It's not the order in the Project Inspector. It's more of a naming convention? I tried to move a new DataItem above the corresponding DataView class and I received the same error again... After placing appending "aa" in front the userClassName to be sure a new file is created, seemed to have fixed the issue. But that isn't consistent for me either.

    After making several changes to my project last night, saved them and published them to a local server, I was shocked to log in and find that all the changes were gone - and of course the error is back.

    It seems that the whole project is being saved somewhere other than the project directory and the program is not doing a good job with syncing between the two collections.

    ....
    http://www.sencha.com/forum/showthre...t-tab-in-focus.

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    10
    Vote Rating
    1
      0  

    Default

    I'm getting the same error, changing the classname doesn't help me.
    Is there another solution/workaround for this matter?

  5. #5
    Sencha User
    Join Date
    Oct 2013
    Posts
    1
    Vote Rating
    0
      0  

    Default Bug in Architect

    Hello,
    I managed to make it work! The order of creating the DataView/DataViewItem/Store is important.

    Here is how I did that:
    • Delete everything or restore to a state where your screen works properly
    • Create a DataItem first (the position in the project inspector seems not important)
    • Fill in the userAlias (to something in lowercase)
    • Optional: Customize it (I added a button next to the default MyComponent)
    Then
    • Create a DataView
    • Change the defaulttype to the chosen value
    • Choose your store
    (Test, you should see nothing since the useComponents is not checked yet)

    Finally:
    • Cross fingers...
    • On your DataView, check useComponents
    It should work!


    Of course, Architect could be better in handling this error and I think this should be reported as a bug. Any feedback?

  6. #6
    Sencha User
    Join Date
    Aug 2015
    Posts
    3
    Vote Rating
    1
      1  

    Default

    Quote Originally Posted by ssok View Post
    Hello,
    I managed to make it work! The order of creating the DataView/DataViewItem/Store is important.

    Here is how I did that:
    • Delete everything or restore to a state where your screen works properly
    • Create a DataItem first (the position in the project inspector seems not important)
    • Fill in the userAlias (to something in lowercase)
    • Optional: Customize it (I added a button next to the default MyComponent)
    Then
    • Create a DataView
    • Change the defaulttype to the chosen value
    • Choose your store
    (Test, you should see nothing since the useComponents is not checked yet)

    Finally:
    • Cross fingers...
    • On your DataView, check useComponents
    It should work!


    Of course, Architect could be better in handling this error and I think this should be reported as a bug. Any feedback?
    I have now tried to do this and all the things above and I am stuck with this exact issue as well, however I am unable to solve it.

    Here is my dataview
    Code:
    {                xtype: 'dataview',
                    defaultType: '--mydataviewitem--',
                    store: '--mystore--',
                    useComponents: true
                }
            ]
    I'm not sure if my dataviewitem is necessary to be posted as it contains nothing special and I am sure the alias matches the actual defaultType.

    Here is what I have tried:
    I have tried to reorder the view with the dataview and the dataviewitem component.
    I have tried to delete the view with the dataview and recreate it both before/after creating the dataviewitem.
    I have tried to delete the dataview and recreate it both before/after.
    I have tried putting the configs in different orders, but I am still unable to get this problem solved.
    I have tried renaming the view with the dataview, the dataview and the dataviewitem.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •