CODEWITHSUNDEEP
sencha-touch-2
h4labs
h4labs

Reputation: 785

Creating a custom component for alerts?

I'm trying develop a custom component like that shown in my mockup. I found an example component on the web (might have been in Sencha's docs), and now I'm trying to adapt it for my purposes. I have two questions:

What I need is like a scrollable list view but with a different type of view. Sort of like the balloons in Apple's iPhone Messages app.

Component Mockup

Sample code that I found on the Internet and I'm in the middle of adapting: 

Ext.define("Sencha.view.ComponentView", {
    extend: 'Ext.Component',
    xtype: 'custom-component',

    config: {
        xtype: 'container',
        scrollable: true,
        layout: {type: 'vbox', pack: 'start', align: 'stretch'},
        cls: ['view1'],
        data: {
            items: [
                {name: 'Congestion near tunnel', n: 100},
                {name: 'Car fore near exit 10', n: 21},
                {name: 'Broken down vehicle in tunnel', n: 24},
                {name: 'Slow traffic next 20 miles', n: 24},
                {name: 'Drive carefully', n: 26}
            ]
        },
        store: 'AlertStore',

        tpl: new Ext.XTemplate(

            '<tpl for="items">',
            '{% if(xindex % this.getPerRow() == 1) {%}',
            '<div class="view-container">',
            '{% } %}',

            '<div class="alert-row">',
            '<div class="name">{[xindex]} - {name}</div>',
            '</div>',

            '{% if(xindex % this.getPerRow() == 0 || xindex == xcount){ %}',
            '</div>',
            '{% } %}',
            '</tpl>',
            {
                getPerRow: function () {
                    return 2;
                }
            })
    },

    initialize: function () {
        this.callParent(arguments);

    }
});

Upvotes: 2

Views: 863

Answers (3)

h4labs
h4labs

Reputation: 785

Here's what I came up with from the provided answers.


    Ext.define("SF.view.SampleDataView", {
        extend: 'Ext.Container',
        xtype: 'sample-view',
        id: 'sample-view-id',

        requires: [],

        config: {
            cls: ['class1', 'class2'],

            items: [
                {
                    xtype: 'dataview',
                    cls: 'myclass',
                    itemTpl: '{name}',
                    store: {
                        fields: ['name'],
                        data: [
                            {name: 'Congestion near tunnel'},
                            {name: 'Broken down vehicle in tunnel'},
                                                                                                {name: 'The conference is over.  See you next year.'},
                        {name: 'Slow traffic next 20 miles'},
                        {name: 'Drive carefully'},
                        {name: 'Congestion near tunnel'},
                        {name: 'Broken down vehicle in tunnel'},
                        {name: 'The conference is over.  See you next year.'},
                        {name: 'Slow traffic next 20 miles'},
                        {name: 'Drive carefully'}
                    ]
                }
            }
        ]
    },

    initialize: function () {
        this.callParent(arguments);
    }
});

I also added some margin and padding to @bwags' css.


    .customRound {
        border:2px solid;
        border-radius:25px;
        margin: 30px;
        padding: 10px;
    }

Upvotes: 0

bwags
bwags

Reputation: 1008

You should just be able to use a list and a css class to add rounded corners to your list items.

Here is a basic fiddle: http://new.senchafiddle.com/#/vZ4fT/

Upvotes: 1

Andrea Casaccia
Andrea Casaccia

Reputation: 4971

I implemented this chat for this application with Sencha Touch 2:

enter image description here

This is a list with an XTemplate. As @kevhender suggested in his comment, you should let your component inherit from Ext.dataview.DataView (or Ext.dataview.List if you don't need listitems made by more than one component).

Of course you can drive your component with a store, checkout Sencha Docs section on stores. You can basically retrieve your data from a proxy attached to the store, or you can get it from any other source, for example with Ext.Ajax or Ext.data.JsonP, then use setData() on the store. Once you have configured correctly the store the list will automatically update itself when changing its contents.

Upvotes: 1

Related Questions