1. #1
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    108
    Answers
    2
    Vote Rating
    0
    =NR= has a little shameless behaviour in the past

      0  

    Default Answered: how to use dataview inside ex.container

    Answered: how to use dataview inside ex.container


    Hi there,

    i'm new to sencha touch 2 and currently having trouble on how to use the dataview,

    so what i'm trying to achieve is to use the dataview as just mere component as you would use with textbox ( i mean just declare the dataview in the view class including all the property and stores) and not creating a variable of it (well more like what i've accomplished in my Greeting.js which you can see below)

    i did go through this example but i just don't want to create a variable in my view class..

    btw : i kept getting error as following:
    Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.Dataview

    app.js:
    Code:
    //<debug>Ext.Loader.setPath({
        'Ext': 'touch/src', //location of the sdk source
        'newapp': 'app' //location of app source
    });
    //</debug>
    
    
    Ext.application({
        name: 'newapp',
    
    
        controllers: ['Greeting'],
        views: ['Main', 'Greeting', 'Players'],
        stores: ['Players'],
        models: ['Player'],
    
    
        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('newapp.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();
                    }
                }
            );
        }
    });
    [View] Main.js
    Code:
    Ext.define('newapp.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'formMain',
    
    
    
    
        config: {
            tabBarPosition: 'bottom',
    
    
            items: [
                {
                    xtype: 'formGreeting'
                },
                {
                    xtype: 'formPlayers'
                }
            ]
        }
    });

    [View] Greeting
    Code:
    Ext.define('newapp.view.Greeting', {
        extend: 'Ext.form.Panel',
        xtype: 'formGreeting',
        requires: [
            'Ext.form.FieldSet'
        ],
        
        config: {
            title: 'Greeting',
            iconCls: 'star',
            
            items: [
                {
                    xtype: 'fieldset',
                    title: 'Greeting',
                
                    items: [
                        {
                            xtype:'textfield',
                            id: 'firstName',
                            label: 'First Name'
                        },
                        {
                            xtype: 'textfield',
                            id: 'lastName',
                            label: 'Last Name'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    id: 'btnGreet',
                    text: 'Say hello..',
                    ui: 'confirm'
                }
            ]
        }
    });
    [View]Players
    Code:
    Ext.define('newapp.view.Players', {
        extend: 'Ext.Container',
        xtype: 'formPlayers',
        
        requires: [
            'Ext.dataview.DataView'
        ],
        
        config: {
            title: 'Player Info',
            iconCls: 'user',
            layout: 'fit',
            items: [
                {
                    xtype: 'Dataview',
                    id: 'dvProducts',
                    emptyText: 'There is no product to display.',
                    inline: 'false', //so the item will be arranged horizontally
                    store: {
                        fields: ['name', 'age'],
                        data: [
                            {name: 'Django', age: 35},
                            {name: 'Rob', age: 45},
                            {name: 'Toshiro', age: 30},
                            {name: 'Jacky', age: 55},
                            {name: 'Ed', age: 60},
                        ]
                    },
                    itemTpl: '<div>{name} is {age} years old</div>',
                }
            ]
        }
    
    
    });

  2. like the error says
    HTML Code:
     xtype: 'Dataview',
    is wrong
    if you look into the doc you can see that Ext.dataview.DataView has the
    Code:
     xtype: 'dataview',
    in lower case

    http://docs.sencha.com/touch/2-1/#!/...aview.DataView

  3. #2
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Answers
    21
    Vote Rating
    12
    mrsunshine will become famous soon enough

      1  

    Default


    like the error says
    HTML Code:
     xtype: 'Dataview',
    is wrong
    if you look into the doc you can see that Ext.dataview.DataView has the
    Code:
     xtype: 'dataview',
    in lower case

    http://docs.sencha.com/touch/2-1/#!/...aview.DataView

  4. #3
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    108
    Answers
    2
    Vote Rating
    0
    =NR= has a little shameless behaviour in the past

      0  

    Default


    Quote Originally Posted by mrsunshine View Post
    like the error says
    HTML Code:
     xtype: 'Dataview',
    is wrong
    if you look into the doc you can see that Ext.dataview.DataView has the
    Code:
     xtype: 'dataview',
    in lower case

    http://docs.sencha.com/touch/2-1/#!/...aview.DataView
    Hi There Mr.Sunshine,

    Thank you for your reply, will give it a try today

    But still wondering how do you know that?
    I mean i go through the documentation and did not see any
    Information regarding the xtype

    It will be very helpful in the future to know where to find that kind of indormation

  5. #4
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    108
    Answers
    2
    Vote Rating
    0
    =NR= has a little shameless behaviour in the past

      0  

    Default


    okay so i give it a try with lowercase of "d" and i think its working now (also need to change the store to reference a store class instead of directly declaring the static data).

    but now why is it not displaying anything at the page (not even the empty text message)?
    i did state the layout..

    here are my update code:

    [View]App.js
    Code:
    //<debug>
    Ext.Loader.setPath({
        'Ext': 'touch/src', //location of the sdk source
        'newapp': 'app' //location of app source
    });
    //</debug>
    
    
    Ext.application({
        name: 'newapp',
    
    
        requires: [
            'Ext.MessageBox'
        ],
    
    
        controllers: ['Greeting'], //why is it if i declare this controllers inside the 'newapp.view.Greeting' it will not be triggered ?
        views: ['Main'],
        stores: ['Players'],
        models: ['Player'], 
    
    
        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('newapp.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();
                    }
                }
            );
        }
    });


    [View]Players.js
    Code:
    Ext.define('newapp.view.Players', {
        extend: 'Ext.Container',
        xtype: 'formPlayers',
        
        requires: [
            'Ext.Component',
    		'Ext.dataview.DataView'
        ],
        
        config: {
            title: 'Player Info', //title for this form/page on the tab bar
            iconCls: 'user',	 //icon of this form/page on the tab bar
            layout: 'fit',		//layout of the container
            items: [
                {
                    xtype: 'dataview',
    				useComponents: true,
                    id: 'dvProducts',
                    emptyText: 'There is no product to display.',
                    inline: 'true', //so the item will be arranged horizontally
                    store: 'Players',
                    itemTpl: '<div>{name}</div>',
                }
            ]
        }
    });


    [Store]Players.js
    Code:
    Ext.define('newapp.store.Players' , {
    	extend: 'Ext.data.Store',
    	
    	config: {
    		model: 'newapp.model.Player',
    		//declare the data statucly for the moment
    		data: [
    			{name: 'air strike', image: '\resources\images\products\gundam\air strike.jpg'},
    			{ name: 'astray blue frame', image: '\resources\images\products\gundam\astray blue frame.jpg' },
    			{ name: 'astray gold frame', image: '\resources\images\products\gundam\astray gold frame.jpg' },
    			{ name: 'astray red frame', image: '\resources\images\products\gundam\astray red frame.jpg' },
    			{ name: 'crossbone x1 ver ka', image: '\resources\images\products\gundam\crossbone x1 ver ka.jpg' },
    			{ name: 'deathscythe ver ka', image: '\resources\images\products\gundam\deathscythe ver ka.jpg' },
    			{ name: 'double x', image: '\resources\images\products\gundam\double x.jpg' },
    			{ name: 'freedom', image: '\resources\images\products\gundam\freedom.jpg' },
    			{ name: 'heavy arms ver ka', image: '\resources\images\products\gundam\heavy arms ver ka.jpg' },
    			{ name: 'wing zero angel', image: '\resources\images\products\gundam\wing zero angel.jpg' },
    			{ name: 'wing zero custom', image: '\resources\images\products\gundam\wing zero custom.jpg' }
    		]
    	}
    })


    [Model]Player.js
    Code:
    Ext.define('newapp.model.Player', {
    	extend: 'Ext.data.Model',
    	
    	config: {
    		fields: ['name', 'image']
    	}
    });