---
title: "Add a button in DataView Item in Sencha Touch"  
description: "In this article, I’m explaining how to add to a button in dataview item in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-08  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1317/add-a-button-in-dataview-item-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 4 minutes  

---

# Add a button in DataView Item in Sencha Touch

In this article, I’m explaining how to add to a button in [dataview](https://www.mindstick.com/blog/151/dataview-in-ado-dot-net) item in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

In sencha touch, we cannot add a button in a list [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2), but in our [requirement](https://yourviews.mindstick.com/view/85169/becoming-an-influencer-requirement-of-skills-and-knowledge) 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](https://www.mindstick.com/forum/424/how-to-call-form_paint-event-on-button-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](https://www.mindstick.com/forum/156583/best-way-to-link-bootstrap-file-in-your-project) and named it TestModel.

```
Ext.define('MyApp.model.TestModel', {
    extend: 'Ext.data.Model',
 
    config: {
        fields: [
            {
                name: 'name'
            },
            {
                name: 'button'
            }
        ]
    }
});
```

[Add two](https://www.mindstick.com/forum/480/add-two-number) fields name and button to the TestModel through field [configuration](https://www.mindstick.com/articles/13112/setting-up-the-perfect-configuration-for-your-work-computer).

##### 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](https://www.mindstick.com/forum/161/problem-in-getting-text-property-for-sender-object) to button(name of field in TestModel).

##### Output

![Add a button in DataView Item in Sencha Touch](https://www.mindstick.com/mindstickarticle/7e5f2c79-9f2c-41d6-8411-7418ec0d7217/images/2760e9eb-e27b-4287-ba7f-e311777f12b4.png)

---

Original Source: https://www.mindstick.com/articles/1317/add-a-button-in-dataview-item-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.