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

  Modified On Nov-18-2017 11:06:15 AM

Leave Comment