Home > DeveloperSection > Articles > Add a button in DataView Item in Sencha Touch

Add a button in DataView Item in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 7287  View(s)
Rate this:

Add a button in DataView Item in Sencha Touch

In this article, I’m explaining how to add to a button in dataview item in sencha touch.

In sencha touch, we cannot add a button in a list component, but in our requirement is that we want a button in every row so we can either edit the data, delete it or any other task you want to perform on the tap/click event of the button.

Adding a button in DataView Item is very simple, you just need to follow some steps:

Step 1:

Firstly add a model to your project and named it TestModel.

Ext.define('MyApp.model.TestModel', {

    extend: 'Ext.data.Model',

 

    config: {

        fields: [

            {

                name: 'name'

            },

            {

                name: 'button'

            }

        ]

    }

});

 

Add two fields name and button to the TestModel through field configuration.

Step 2:

Next  add a store to your project and named it TestStore.

Ext.define('MyApp.store.TestStore', {

    extend: 'Ext.data.Store',

 

    requires: [

        'MyApp.model.TestModel'

    ],

 

    config: {

        data: [

            {

                name: 'Joseph Henry',

                button: 'Save'

            },

            {

                name: 'Mark Richard',

                button: 'Delete'

            },

            {

                name: 'Bill Gates',

                button: 'Edit'

            }

        ],

        model: 'MyApp.model.TestModel',

        storeId: 'TestStore'

    }

});

 

Add the TestModel  to the store, give storeId and data thorugh data configuration.

Step 3:

Next add the dataview to the project by drag-n-drop the dataview onto the canvas and named it TestDataView.

Ext.define('MyApp.view.TestDataView', {

    extend: 'Ext.dataview.DataView',

 

    config: {

        fullscreen: true,

        defaultType: 'MyDataItem',

        store: 'TestStore',

        useComponents: true,

        itemTpl: [

            '<div>Data View Item {string}</div>'

        ]

    }

});

 

Add the store to the dataview through store configuration and give defaultType. The value of defaultType is the alias name of DataView Item which will be add next.

Step 4:

Drag-n-drop the dataview item onto the canvas and named it TestDataItem.

Ext.define('MyApp.view.TestDataItem', {

    extend: 'Ext.dataview.component.DataItem',

    alias: 'widget.MyDataItem',

 

    config: {

        padding: 10,

        layout: {

            type: 'hbox'

        },

        items: [

            {

                xtype: 'component',

                flex: 1,

                html: 'name',

                itemId: 'textCmp'

            },

            {

                xtype: 'button',

                text: 'button'

            }

        ]

    },

 

    updateRecord: function(record) {

        // Provide an implementation to update this container's child items

        var me = this;

 

        me.down('button').setText(record.get('button'));

        me.down('#textCmp').setHtml(record.get('name'));

 

        me.callParent(arguments);

    }

});

 

One component comes by default with dataview item give itemId textCmp and set the html to name (name of field in TestModel) and add a button to tha dataview Item and set its text property to button(name of field in TestModel).

Output

Add a button in DataView Item in Sencha Touch


Don't want to miss updates? Please click the below button!

Follow MindStick