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
Leave Comment