1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    Noodlese is on a distinguished road

      0  

    Default Answered: Using DataItem without DataView

    Answered: Using DataItem without DataView


    I am trying to create a component that builds itself as mapped to a record. I was taking a look at the DataItem component, but it seems like it is coupled to be used with the DataView component. I do not need the functionality of applying a "list" of DataItems to the DataView. I simply just need one DataItem to be mapped to one record.

    Is there any way of using DataItem without using DataView? Or do I need to use the both of them while simply feeding the store a single record instead of an array of records.

    Thanks!

  2. Here is an example:

    Code:
    Ext.define('MyContainer', {
        extend : 'Ext.Container',
        xtype  : 'mycontainer',
    
        config : {
            record : null,
            items  : true
        },
    
        applyItems : function(items, collection) {
            var record = this.getRecord();
    
            items = [
                {
                    flex : 1,
                    html : record.get('left')
                },
                {
                    flex : 1,
                    html : record.get('right')
                }
            ];
    
            return this.callParent([items, collection]);
        }
    });
    
    Ext.define('MyModel', {
        extend : 'Ext.data.Model',
    
        config : {
            fields : ['left', 'right']
        }
    });
    
    Ext.application({
        name : 'Test',
    
        launch : function () {
    
            Ext.Viewport.setActiveItem({
                xtype  : 'mycontainer',
                layout : {
                    type  : 'hbox',
                    align : 'stretch'
                },
                record : new MyModel({
                    left  : 'foo',
                    right : 'bar'
                })
            });
    
        }
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    Shouldn't be too hard to build a container that gets text from a record.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    Noodlese is on a distinguished road

      0  

    Default


    I am currently implementing this using a DataView / DataItem which only contains one item. This technique allows me to take advantage of the component generation features of the DataView.

    If I was to create a container that mapped to a record, would I have to use a template to control the content? It seems like using a template would be quite restrictive in its possibilities (no components for example).

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    No, just build the items based on the record data. Using DataView is not needed.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    Noodlese is on a distinguished road

      0  

    Default


    I am new to Sencha Touch and I really appreciate your help. I feel like I am missing something as I don't fully understand your instruction. Is there an example in the docs that describes what you are talking about? Every example that I have found has been either using DataViews or using templates.

    Are you referring to programmatically updating the text within the container with record data, and not using pre-built solution to map data.

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    Here is an example:

    Code:
    Ext.define('MyContainer', {
        extend : 'Ext.Container',
        xtype  : 'mycontainer',
    
        config : {
            record : null,
            items  : true
        },
    
        applyItems : function(items, collection) {
            var record = this.getRecord();
    
            items = [
                {
                    flex : 1,
                    html : record.get('left')
                },
                {
                    flex : 1,
                    html : record.get('right')
                }
            ];
    
            return this.callParent([items, collection]);
        }
    });
    
    Ext.define('MyModel', {
        extend : 'Ext.data.Model',
    
        config : {
            fields : ['left', 'right']
        }
    });
    
    Ext.application({
        name : 'Test',
    
        launch : function () {
    
            Ext.Viewport.setActiveItem({
                xtype  : 'mycontainer',
                layout : {
                    type  : 'hbox',
                    align : 'stretch'
                },
                record : new MyModel({
                    left  : 'foo',
                    right : 'bar'
                })
            });
    
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    Noodlese is on a distinguished road

      0  

    Default


    Thanks! That was greatly helpful!

Thread Participants: 1