CODEWITHSUNDEEP
extjscontainersstoredataview
suoxd123
suoxd123

Reputation: 131

sencha 2: how to show dataview in container

I create the dataview in controller, but it cannot be shown as normal. I am a newer in sencha, need help please.

app.js

Ext.application({

    name: 'ajmd',
    views: [
        'center'
    ],
    controllers: [
        'center'
    ],
    launch: function() {
        Ext.Viewport.add([{
            xtype:'centerView'
        }]);       
    }
});

center.js (view)

Ext.define("ajmd.view.center", {
    extend: 'Ext.Container',
    xtype: 'centerView'
});

center.js (controller)

Ext.define("ajmd.controller.center", {
    extend: 'Ext.app.Controller',
    config: {
        refs:{
            main:'centerView'
        },
        control:{
            main:{
                initialize:'fnInitial'
            }
        }
    },
    fnInitial:function(item){
        var touchTeam = Ext.create('Ext.DataView', {
            // items:[{
            //  xtype:'panel',
            //  html:'hello world'
            // }],
            store: {
                fields: ['name', 'age'],
                data: [
                    {name: 'Jamie Avins',  age: 100},
                    {name: 'Rob Dougan',   age: 21},
                    {name: 'Tommy Maintz', age: 24},
                    {name: 'Jacky Nguyen', age: 24},
                    {name: 'Ed Spencer',   age: 26}
                ]
            },
            itemTpl:'{name} is {age} years old'
        });
        var myPanel = Ext.create('Ext.Panel', {
            html: 'This will be added to a Container'
        });
        item.add(myPanel);
        item.add(touchTeam);
    }
});

results

This will be added to a Container

======================================================

if I uncomment those items within dataview, it can only show the items(hello world) in dataview, but the name and age cannot be shown all the time. I cannot figure out what's the problem.

thanks.

Upvotes: 2

Views: 2020

Answers (3)

suoxd123
suoxd123

Reputation: 131

Thanks @Undefined, @Benka.

I figure out the problem by add width and height config.

var touchTeam = Ext.create('Ext.DataView', {
            // fullscreen: true,
            // items:[{
            //  xtype:'panel',
            //  html:'hello world'
            // }],
            width:'100%',
            height:'100%',
            store: {
                fields: ['name', 'age'],
                data: [
                    {name: 'Jamie Avins',  age: 100},
                    {name: 'Rob Dougan',   age: 21},
                    {name: 'Tommy Maintz', age: 24},
                    {name: 'Jacky Nguyen', age: 24},
                    {name: 'Ed Spencer',   age: 26}
                ]
            },
            itemTpl:'<div>{name} is {age} years old</div>'
        });

I found the data is hidden by the the block of app.css .x-layout-card{position:relative;overflow:hidden}

actually, the data can be display if x-layout-card is covered by my css, but cannot display on mobile as well. But if I use width and height config, data can be shown in phone and web.

thanks all of you.

It is my first time to ask question here . It's amazing and thank you for your response.

Upvotes: 1

Prasad K - Google
Prasad K - Google

Reputation: 2584

There is no Ext.dataview.DataView component in Ext4.

Try with Ext.DataView.

Check the working code at -

http://jsfiddle.net/f9SXF/1/

Ext.create('Ext.DataView', {

    // items:[{
    //  xtype:'panel',
    //  html:'hello world'
    // }],
    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie Avins',  age: 100},
            {name: 'Rob Dougan',   age: 21},
            {name: 'Tommy Maintz', age: 24},
            {name: 'Jacky Nguyen', age: 24},
            {name: 'Ed Spencer',   age: 26}
        ]
    },
    itemTpl:'{name} is {age} years old'
});

Upvotes: 1

benka
benka

Reputation: 4742

Remove , from the end of main:'centerView', here:

refs:{
    main:'centerView',
},

Upvotes: -1

Related Questions