Related
I'm new to sencha touch.I wrote code for number keypad,but the buttons are displayed vertically.my code is
Ext.define("exercise.view.Numberplate",{
extend: "Ext.SegmentedButton",
requires:['Ext.Button'],
xtype:'Numberplate',
allowMultiple: true,
config: {
pack:'center',
centered:true,
height:30,
width:100,
xtype:'button',
items: [
{
xtype:'segmentedbutton',
allowDepress:true,
scroll:true,
//layout:'vbox',
items:[
{
text:'1',
width:100
},
{
text : '2',
width:100
},
{
text: '3',
width:100
}
]
},
{
xtype:'segmentedbutton',
//centered:true,
pack:'center',
items:[
/* {
centered:true,
html: [
'<br><br><br><br>'
].join("")
},*/
{
text:'4',
width:100
},
{
text:'5',
width:100
},
{
text:'6',
width:100
}
]
}
]
},
constructor: function() {
this.on({
scope: this,
delegate: 'button',
tap: 'tapHandler'
});
this.callParent(arguments);
},
tapHandler: function(button) {
alert(button.getText());
// this.setHtml("<span class=action>User tapped " + button.getText() + "</span>");
}
});
I tried ,but i didnt get this .I think it's easy but i don't know how to do this.can anyone help me.thanks in advance
Just add layout:vbox to your config:
Ext.define("exercise.view.Numberplate",{
extend: "Ext.SegmentedButton",
requires:['Ext.Button'],
xtype:'Numberplate',
allowMultiple: true,
config: {
layout: 'vbox', // Add right here
pack:'center',
centered:true,
height:30,
width:100,
xtype:'button',
items: [
{
xtype:'segmentedbutton',
allowDepress:true,
scroll:true,
//layout:'vbox',
items:[
{
text:'1',
width:100
},
{
text : '2',
width:100
},
{
text: '3',
width:100
}
]
},
{
xtype:'segmentedbutton',
//centered:true,
pack:'center',
items:[
/* {
centered:true,
html: [
'<br><br><br><br>'
].join("")
},*/
{
text:'4',
width:100
},
{
text:'5',
width:100
},
{
text:'6',
width:100
}
]
}
]
},
constructor: function() {
this.on({
scope: this,
delegate: 'button',
tap: 'tapHandler'
});
this.callParent(arguments);
},
tapHandler: function(button) {
alert(button.getText());
// this.setHtml("<span class=action>User tapped " + button.getText() + "</span>");
}
});
Hope it helps :)
I need the tab-panels to fit browser window size. I have used card layout, and it is not re-sizing to fit the browser window. I think i'm missing some properties in my viewPort.
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: { xtype: 'tabP1' }
},
{
xtype: 'panel',
items: { xtype:'tabP2' }
}
,
{
xtype: 'panel',
items: { xtype:'tabP3' }
}
]
});
},
2.) One of my tabpanels; I am using absolute layout. I am using this layout because it's easy to set form components where i ever i desire it to be. Therefore, i would like a solution that works with the same layout.
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.tabP1',
// height: 250,
// width: 726,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'My Form',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
viewConfig: {
}
}
]
});
me.callParent(arguments);
}
});
UPDATE 2
UPDATE 2
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'tabP1'
},
{
xtype:'tabP2'
}
,
{
xtype:'tabP3'
}
]
});
},
onSuccess: function() {
this.getViewport().getLayout().setActiveItem(1);
},
I get an error when i use your code, saying that this.getViewport().getLayout().setActiveItem(1) is not a function. I think this is because i used border layout. How can i resolve this ?
Your problem is "over-nesting" Why are you putting 'tabPFoo' inside a panel with no layout? They are at best, redundant, also causing the layout system to spend more cycles when it's not needed.
Ext.require('*');
Ext.onReady(function(){
var vp = new Ext.container.Viewport({
layout: 'card',
items: [{
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 1'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.nextSibling();
vp.getLayout().setActiveItem(next);
}
}
}, {
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 2'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.nextSibling();
vp.getLayout().setActiveItem(next);
}
}
}, {
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 3'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.previousSibling().previousSibling();
vp.getLayout().setActiveItem(next);
}
}
}]
});
});
Obviously that's not MVC style, but that's the structure the layout should take.
I'm just learning sencha touch 2, MVC. I would to make a simple form that get a value, pass to a PHP file (for an API call to a web-service), move to a Nested List and show results.
But, my app doesn't show nothing after submit... Value is captured correctly (I see it in console log).
Please someone could me help?
Consider for testing that for now I don't pass value, and my API call calls directly with a hard-coded value. In future I'll work to pass form value...
Thank you in advance!
This is "app.js"
Ext.application({
name: 'Appre',
icon: 'resources/icons/icon.png',
phoneStartupScreen: 'resources/images/phone_startup.png',
//tabletStartupScreen: 'tablet_startup.png',
glossOnIcon: false,
//profiles: ['Phone', 'Tablet'],
views : ['Viewport','SearchCap','ElencoRistoranti'],
models: ['ElencoRistoranti'],
stores: ['RistorantiCap'],
controllers: ['SearchCap'],
viewport: {
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left',
duration: 300
}
}
},
launch: function() {
Ext.create('Appre.view.Viewport')
} // launch: function() {
}) // Ext.application
This is form "search cap"
Ext.define('Appre.view.SearchCap', {
extend: 'Ext.form.Panel',
xtype: 'appre-searchCap',
config: {
items: [{
xtype: 'fieldset',
layout: 'vbox',
items: [{
xtype: 'textfield',
name: 'cap',
placeHolder: 'Cap'
},
{
xtype: 'button',
text: 'Cerca',
action :'searchCap',
id:'btnSubmitLogin'
}] // items
}] // items
}, // config
initialize: function() {
this.callParent(arguments);
console.log('loginform:initialize');
}
});
This is controller
Ext.define('Appre.controller.SearchCap', {
extend : "Ext.app.Controller",
config : {
refs : {
btnSubmitLogin: 'button[action=searchCap]',
form : 'appre-searchCap'
},
control : {
btnSubmitLogin : {
tap : "onSubmitLogin"
}
}
},
onSubmitLogin : function() {
console.log("onSubmitLogin");
var values = this.getForm().getValues();
console.log(values);
var $this=this;
Ext.Ajax.request({
url: 'cerca-ristoranti-cap.php',
method: 'POST',
params: {
values: Ext.encode({form_fields: values})
},
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
//Ext.Msg.alert('Contact Complete!', obj.responseText);
$this.resetForm();
Ext.Viewport.add(Ext.create('Appre.view.ElencoRistoranti'));
Ext.Viewport.setActiveItem(Ext.create('Appre.view.ElencoRistoranti'));
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
},
resetForm: function() {
this.getForm().reset();
},
launch : function() {
this.callParent();
console.log("LoginForm launch");
},
init : function() {
this.callParent();
console.log("LoginForm init");
}
});
And this is Nested List
Ext.define('Appre.view.ElencoRistoranti', {
extend: 'Ext.Panel',
xtype: 'appre-elencoristoranti',
config: {
xtype: 'nestedlist',
title: 'Cap',
displayField: 'name',
store: {
type: 'tree',
fields: [
'id_restaurant', 'name',
{name: 'leaf', defaultValue: true}
],
root: {
leaf: false
},
proxy: {
type: 'ajax',
url: 'cerca-ristoranti-cap.php',
reader: {
type: 'json',
rootProperty: 'restaurants'
} //reader
} // proxy
},
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().setHtml(post.get('name'));
}
}
} // config
});
cerca-ristoranti-cap.php it's a simple function that returns an array like this:
{
"restaurants":[{
"id_restaurant":"40",
"name":"La Saliera",
"zip":"00128",
"lat":"41.7900229",
"lgt":"12.4513128"
}, {
"id_restaurant":"64",
"name":"Osteria del Borgo",
"zip":"00128",
"lat":"41.7887363",
"lgt":"12.5149867"
}]
}
Hi #sineverba sorry for response a little late, but here something this how you want show,
Viewport.js
Ext.define('myapp.view.Viewport' , {
extend : 'Ext.viewport.Default',
xtype : "viewport",
config: {
fullscreen: true,
styleHtmlContent: true,
style: 'background:#ffffff;',
layout : 'card',
autoDestroy : false,
cardSwitchAnimation : 'slide',
items: [
{
xtype: 'appre-searchCap'
},
],
}
})
app.js
Ext.Loader.setConfig({
enabled: true
})
Ext.application({
name: 'myapp',
requires: [
'myapp.view.SearchCap',
'myapp.view.ElencoRistoranti',
'myapp.view.SearchElenco',
],
controllers: ['SearchCap'],
models: ['myapp.model.SearchCapModel'],
launch: function() {
Ext.create('myapp.view.Viewport')
}
});
SearchCapModel.js
Ext.define('myapp.model.SearchCapModel', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id_restaurant',
fields: [
{ name: 'id_restaurant', type: 'string' },
{ name: 'name', type: 'string'},
{ name: 'zip', type: 'string' },
{ name: 'lat', type: 'string'},
{ name: 'lgt', type: 'string'}
],
}
})
SearchCapStore.js
Ext.define('myapp.store.SearchCapStore', {
extend: 'Ext.data.Store',
config: {
model: 'myapp.model.SearchCapModel',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'cerca-ristoranti-cap.json',
reader: {
type: 'json',
rootProperty: 'restaurants'
} //reader
},
}
});
SearchCap.js
Ext.define('myapp.controller.SearchCap', {
extend : "Ext.app.Controller",
views: ['SearchElenco'],
config : {
refs : {
elencoListContainer: 'elencolistcontainer',
btnSubmitLogin: 'button[action=searchCap]',
form : 'appre-searchCap',
},
control : {
btnSubmitLogin : {
tap : "onSubmitLogin"
}
}
},
onSubmitLogin : function() {
console.log("onSubmitLogin");
var values = this.getForm().getValues();
console.log(values);
Ext.Ajax.request({
url: 'cerca-ristoranti-cap.json',
method: 'POST',
params: {
values: Ext.encode({form_fields: values})
},
success: function(response, opts) {
var obj = response.responseText;
Ext.Msg.alert('Contact Complete!', obj);
Ext.Viewport.add(Ext.create('myapp.view.SearchElenco'));
Ext.Viewport.setActiveItem(1);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
},
resetForm: function() {
this.getForm().reset();
},
launch : function() {
this.callParent();
console.log("LoginForm launch");
},
init : function() {
this.callParent();
console.log("LoginForm init");
}
});
SearchElenco.js
Ext.define('myapp.view.SearchElenco', {
extend: 'Ext.Container',
xtype: 'elencolistcontainer',
requires: ['myapp.store.SearchCapStore'],
initialize: function() {
this.callParent(arguments);
var s = Ext.create('myapp.store.SearchCapStore')
var notesList = {
xtype: 'appre-elencoristoranti',
store: Ext.getStore(s).setAutoLoad(true),
listeners: {
disclose: {
fn: this.onNotesListDisclose,
scope: this
}
}
};
this.add([notesList])
},
onNotesListDisclose: function(list, record, target, index, event, options) {
console.log('editNoteCommand');
this.fireEvent('editNoteCommand', this, record);
},
config: {
layout: {
type: 'fit'
}
}
});
ElencoRistoranti.js
Ext.define('myapp.view.ElencoRistoranti', {
extend: 'Ext.dataview.List',
xtype: 'appre-elencoristoranti',
id: 'appreElenco',
config: {
emptyText: '<pre><div class="notes-list-empty-text">No list found.</div></pre>',
onItemDisclosure: false,
itemTpl: '<pre><div class="list-item-title">{id_restaurant}</div><div class="list-item-narrative">{name}</div></pre>',
}
});
SearchCap.js - View
Ext.define('myapp.view.SearchCap', {
extend: 'Ext.form.Panel',
xtype: 'appre-searchCap',
id: 'appreSearchCap',
config: {
layout: {
type: 'vbox',
},
items: [
{
xtype: 'fieldset',
title: 'Cap',
instructions: 'Enter Cap',
items: [
{
xtype: 'textfield',
name: 'cap',
placeHolder: 'Cap'
},
{
xtype: 'button',
text: 'Cerca',
ui: 'confirm',
action :'searchCap',
id:'btnSubmitLogin'
}
] // items
}
] // items
}, // config
initialize: function() {
this.callParent(arguments);
console.log('loginform:initialize');
}
});
I hope help you and if you have a dude please let me know. :)
In a small program that I have, I'm trying to have custom containers for every leaf node of my Nested List.
Here are a couple arbitrary example containers that I'm trying to test with:
Ext.define('DetailContainer1', {
extend: 'Ext.Container',
xtype: 'detail-container1',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #a9a9a9;',
// flex: 1,
items: [{
html: 'Detail Container1'
}]
});
Ext.define('DetailContainer2', {
extend: 'Ext.Container',
xtype: 'detail-container2',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #c9c9c9;',
// flex: 1,
items: [{
html: 'Detail Container2',
flex: 1
}, {
xtype: 'button',
text: 'Hit me!',
flex: 1
}]
});
How can I switch in the new containers when the user clicks on the leaf node?
This action should happen in onLeafItemTap(). Btw the initial container (#2) isn't showing at the moment. Is this a layout issue?
Here's some idea of what the screen should look like:
Complete source:
Ext.Loader.setConfig({
enabled: true
});
Ext.define('DetailContainer1', {
extend: 'Ext.Container',
xtype: 'detail-container1',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #a9a9a9;',
// flex: 1,
items: [{
html: 'Detail Container1'
}]
});
Ext.define('DetailContainer2', {
extend: 'Ext.Container',
xtype: 'detail-container2',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #c9c9c9;',
// flex: 1,
items: [{
html: 'Detail Container2',
flex: 1
}, {
xtype: 'button',
text: 'Hit me!',
flex: 1
}]
});
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
Ext.define('Sencha.view.MainView', {
extend: 'Ext.Container',
xtype: 'mainview',
layout: {
type: 'hbox'
},
initialize: function() {
this.treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [{
text: 'Containers',
items: [{
text: 'Detail #1',
leaf: true
}, {
text: 'Detail #2',
leaf: true
}]
}]
}
});
this.detailContainer = Ext.create("DetailContainer2", {});
this.nestedList = Ext.create('Ext.NestedList', {
docked: 'left',
width: 300,
flex: 1,
store: this.treeStore,
detailCard: true,
detailContainer: this.detailContainer,
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
});
this.setItems([this.detailContainer, this.nestedList]);
},
onLeafItemTap: function(nestedList, list, index, node, record, e) {
var detailCard = nestedList.getDetailCard();
// nestedList.setDetailContainer(Ext.create("DetailContainer1", {}))
// detailCard.setHtml(record.get('text') + "...");
}
});
Ext.application({
launch: function() {
var container = Ext.create("Ext.Container", {
layout: {
type: 'hbox'
},
items: [{
xtype: 'mainview'
}]
});
Ext.Viewport.add(container);
}
});
Finally I've figured out the proper way to solve your problem.
Some explanations:
If you want to display "customized detailContainer" at the right side of your hbox, it's quite obvious that you should disable detailCard config for your Ext.NestedList because it's designed to display inline (i.e. take place of your Ext.NestedList).
When using Ext.define, everything should be included in config (except extend, xtype, alias, id, so in this case, layout has to be put in config).
flex should be defined in config as well.
At leafitemtap event, simply update your detailContainer config and remove/add it again as it would not be updated dynamically.
Please take a look at modified code snippet below, it works perfectly for me.
Ext.Loader.setConfig({ enabled: true });
Ext.define('DetailContainer1', {
extend: 'Ext.Container',
xtype: 'detail-container1',
config: {
flex: 1,
layout: {
type: 'vbox'
},
style: 'background-color: #a9a9a9;',
items: [
{html: 'Detail Container1'}
]
}
});
Ext.define('DetailContainer2', {
extend: 'Ext.Container',
xtype: 'detail-container2',
config: {
flex: 1,
layout: {
type: 'vbox'
},
style: 'background-color: #c9c9c9;',
items: [
{html: 'Detail Container2', flex: 1},
{xtype: 'button', text: 'Hit me!', flex: 1}
]
}
});
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
Ext.define('Sencha.view.MainView', {
extend: 'Ext.Container',
xtype: 'mainview',
id: 'mainview',
config: {
layout: {
type: 'hbox'
},
},
initialize: function() {
this.treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Containers',
items: [
{ text: 'Detail #1', leaf: true },
{ text: 'Detail #2', leaf: true }
]
}
]
}
});
this.detailContainer = Ext.create("DetailContainer2");
this.nestedList = Ext.create('Ext.NestedList', {
flex: 1,
store: this.treeStore,
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
});
this.setItems([this.nestedList, this.detailContainer]);
},
onLeafItemTap: function(nestedList, list, index, node, record, e) {
mainview = Ext.getCmp('mainview');
if (index==0) {
mainview.detailContainer = Ext.create("DetailContainer1");
} else {
mainview.detailContainer = Ext.create("DetailContainer2");
}
mainview.removeAt(1);
mainview.add(mainview.detailContainer);
}
});
Ext.application({
launch: function() {
Ext.Viewport.add(
Ext.create("Ext.Container", {
layout: {
type: 'card'
},
items: [
{ xtype : 'mainview'}
]
}));
}
});
I'm trying out the new dataview component and I'm working with this Sencha example:
http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/
In KittensListItem, I removed the image and now I want to add three
buttons that say: "Email", "Facebook", and "Twitter", and not the
value in the Store. When the user clicks on each button, I'd like to
show each button's respective Store value. How can this be accomplished?
Here's what the screen looks like at the moment:
Example.view.KittensListItem:
Ext.define('Example.view.KittensListItem', {
extend: 'Ext.dataview.component.DataItem',
xtype : 'contactslistitem',
requires: [ 'Ext.Button', 'Ext.slider.Slider' ],
config: {
dataMap: {
getName: { setHtml: 'name' },
getSlider: { setValue: 'cuteness' },
getEmail: { setHtml: 'email' },
getTwitter: { setHtml: 'twitter' },
getFacebook: { setHtml: 'facebook' }
},
name: { flex: 1 },
slider: { flex: 1 },
email: {
text: 'Email',
style: 'font-size: 12px;',
flex: 1
},
facebook: {
text: 'Facebook1',
style: 'font-size: 12px;',
flex: 1
},
twitter: {
text: 'Twitter',
style: 'font-size: 12px;',
flex: 1
},
layout: {
type: 'hbox',
align: 'center'
}
},
applyName: function(config) { return Ext.factory(config, Ext.Component, this.getName()); },
updateName: function(newName, oldName) {
if (newName) { this.add(newName); }
if (oldName) { this.remove(oldName); }
},
applySlider: function(config) { return Ext.factory(config, Ext.slider.Slider, this.getSlider()); },
updateSlider: function(newSlider, oldSlider) {
if (newSlider) { this.add(newSlider); }
if (oldSlider) { this.remove(oldSlider); }
},
applyEmail: function(config) { return Ext.factory(config, Ext.Button, this.getEmail()); },
updateEmail: function(newEmailButton, oldEmailButton) {
if (newEmailButton) { this.add(newEmailButton); }
if (oldEmailButton) { this.remove(oldEmailButton); }
},
applyTwitter: function(config) {return Ext.factory(config, Ext.Button, this.getTwitter()); },
updateTwitter: function(newTwitterButton, oldTwitterButton) {
if (newTwitterButton) { this.add(newTwitterButton); }
if (oldTwitterButton) { this.remove(oldTwitterButton); }
},
applyFacebook: function(config) { return Ext.factory(config, Ext.Button, this.getFacebook()); },
updateFacebook: function(newFacebookButton, oldFacebookButton) {
if (newFacebookButton) { this.add(newFacebookButton); }
if (oldFacebookButton) { this.remove(oldFacebookButton); }
}
});
Model:
Ext.define('Example.model.Kitten', {
extend: 'Ext.data.Model',
config: {
fields: [
"name",
"email",
"twitter",
"facebook",
{ name: "cuteness", type: 'int' }
]
}
});
Store:
Ext.define('Example.store.Kittens', {
extend: 'Ext.data.Store',
requires: ['Example.model.Kitten'],
config: {
model: 'Example.model.Kitten',
data: [
{ name: 'one', email: 'email#addr', twitter: '#twitter', facebook: 'Facebook...', cuteness: 70 },
{ name: 'two', email: 'email#addr', twitter: '#twitter', facebook: 'Facebook...', cuteness: 90 },
{ name: 'three', email: 'email#addr',twitter: '#twitter', facebook: 'Facebook...',cuteness: 40 }
]
}
});
After scouring the Internet I found a solution to the 'tap' event for each button. The trick is to add a tap listener in the update* functions. I'm still not sure how to set the static labels on each button.
Btw, a better answer gets someone else the upvote and check.
updateEmail: function(newEmailButton, oldEmailButton) {
if (newEmailButton) {
newEmailButton.on('tap', this.onEmailButtonTap, this);
this.add(newEmailButton);
}
if (oldEmailButton) {
this.remove(oldEmailButton);
}
},
onEmailButtonTap: function(button, event) {
var record = this.getRecord();
Ext.Msg.alert(record.get('email') + ", " + record.get('facebook') );
}
Hi I'm new to Sencha Touch and having problems too getting started. I came across this post looking for ways to access dataview item components/values from a controller. In my case I'm looking to use a slider and editbox value together and automatically update either value after updates.
Dataview has an itemtap listener which is handy returning the row index and the record as mentioned in this post. I still found it was a problem to pin down the component that was tapped so ended up just filtering the component by event object name.
Controller:
control: {
'contactslistitem': {
itemtouchend: 'tapItem',
}
}
tapItem: function(dataview, index, target, record, e, eOpts) {
if('facebookbutton'==e.target.name)
alert('Tapped facebook button on row '+index);
}
The dataview config for the facebook button element includes the name attribute:
facebook: {
name: 'facebookbutton'
text: 'Facebook1',
style: 'font-size: 12px;',
flex: 1
},
I still feel there must be a better way with ST2 to process dataview rows components together without having to look up the index/component each time.