I have the following code for nested list and i want to write onclick() event for “Add to cart button” . This button is an html element. so how do i write the event???
I basically want to add the price and quantity to database on button click.
the code goes like this.
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icons/logo4_1.png',
glossOnIcon: true,
title:'Item List',
fullscree:true,
onReady: function() {
var data = {
title:'Item List',
text: 'Groceries',
items: [{
text: 'Beverages',
cont:'>',
imgURL:'<div align="center"><img src="icons\\Beverages.jpg" width="60" heigh="60"/></div>',
items: [{
text: 'Water 1Ltr',
price:'18rs/btl',
imgURL:'<img src="images\\beverage\\water.jpg" width="60" heigh="60"/>',
element:'<div align="right" width="20"> Qty:<input type="text"/><button>Add to Cart</button></div>',
leaf:true,
},
{
text:'Coffee',
price:'45rs/pack',
imgURL:'<img src="images\\beverage\\bru.jpg" width="60" heigh="60"/>',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
leaf: true
}, {
text: 'Espresso',
price:'50rs/pack',
imgURL:'<img src="images\\beverage\\espresson.jpg" width="60" heigh="60"/>',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
leaf: true
}, {
text: 'Redbull',
price:'50rs/Can',
imgURL:'<img src="images\\beverage\\redbull.jpg" width="60" heigh="60"/>',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
leaf: true
}, {
text: 'Coke',
price:'35rs/Can',
imgURL:'<img src="images\\beverage\\coke.jpg" width="60" heigh="60"/>',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
leaf: true
}, {
text: 'Diet Coke',
price:'40rs/Can',
imgURL:'<img src="images\\beverage\\dietcoke.jpg" width="60" heigh="60"/>',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
leaf: true
}]
},{
text: 'Fruits',
cont:'>',
imgURL:'<div align="center"><img src="icons\\fv.jpg" width="60" heigh="60"/></div>',
items: [{
text: 'Bananas',
price:'25rs/Kg',
imgURL:'<img src="images\\fv\\banana.jpg" width="60" heigh="60"/>',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
leaf: true
},
{
text: 'Watermelon',
price:'15rs/Kg',
imgURL:'<img src="images\\fv\\watermelon.jpg" width="60" heigh="60"/>',
element:'<div align="right"> Qty:<input type="text" width="20"/><button>Add to Cart</button></div>',
leaf: true
}
,
{
text: 'Grapes',
cont:'>',
imgURL:'<div align="center"><img src="images\\fv\\grapes.jpg" width="60" heigh="60"/></div>',
items: [
{text:'Black Grapes',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
price:'25rs/Kg',
imgURL:'<img src="images\\fv\\blackgrapes.jpg" width="60" heigh="60"/>',
leaf: true
},
{
text:'Green Grapes',
price:'20rs/Kg',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\fv\\greengrapes.jpg" width="60" heigh="60"/>',
leaf:true
}]
},
{
text: 'Pear',
price:'125rs/Kg',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\fv\\pear.jpg" width="60" heigh="60"/>',
items:[{xtype:'button',ui:'action'}],
leaf: true
}
,{
text: 'Apple',
price:'105rs/Kg',
element:'<div align="right"> Qty:<input type="text"/><button onclick="function show(){alert("hello");}">Add to Cart</button></div>',
imgURL:'<img src="images\\fv\\apple.jpg" width="60" heigh="60"/>',
leaf: true
}]
},
{
text: 'Bakery',
cont:'>',
imgURL:'<div align="center"><img src="icons\\bread_Bakery.jpg" width="60" heigh="60"/></div>',
items: [{
text: 'Bread',
imgURL:'<div align="center"><img src="images\\bread\\bread.jpg" width="60" heigh="60"/></div>',
cont:'>',
items: [{
text: 'White Bread',
price:'18rs/Pound',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\bread\\white.jpg" width="60" heigh="60"/>',
leaf: true,
},
{
text: 'Brown Bread',
price:'25rs/Pound',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\bread\\brown.jpg" width="60" heigh="60"/>',
leaf: true,
},
]
},{
text: 'Stuffed Bread Rolls',
price:'15rs/Piece',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\bread\\rolls.jpg" width="60" heigh="60"/>',
leaf: true
},{
text: 'Cup Cakes',
price:'10rs/Piece',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\bread\\cupcake.jpg" width="60" heigh="60"/>',
leaf: true
}]
},{
text: 'Personal Care',
cont:'>',
imgURL:'<div align="center"><img src="icons\\Personal_Care.jpg" width="60" heigh="60"/></div>',
items: [
{
text: 'Shampoo 500ml',
cont:'>',
imgURL:'<div align="center"><img src="images\\pc\\shampoo.jpg" width="60" heigh="60"/></div>',
items: [
{
text: 'Dove',
price:'59rs/Btl',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\shampoo.jpg" width="60" heigh="60"/>',
leaf:true,
},
{
text: 'Sunsilk',
price:'62rs/Btl',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\sunsilk.jpg" width="60" heigh="60"/>',
leaf:true,
},
{
text: 'Garnier',
price:'70rs/Btl',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\garnier.jpg" width="60" heigh="60"/>',
leaf:true,
},
]
},
{
text: 'Soaps 50gms',
cont:'>',
imgURL:'<div align="center"><img src="images\\pc\\soap.jpg" width="60" heigh="60"/> </div>',
items: [
{
text: 'Dove',
price:'25rs/Piece',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\dove.jpg" width="60" heigh="60"/>',
leaf:true,
},
{
text: 'Pears',
price:'28rs/Piece',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\pears.jpg" width="60" heigh="60"/>',
leaf:true,
},
{
text: 'Lux',
price:'20rs/Piece',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\lux.jif" width="60" heigh="60"/>',
leaf:true,
},
]
},
{
text: 'Hair Oil 500ml',
cont:'>',
imgURL:'<div align="center"><img src="images\\pc\\hairoil.jpg" width="60" heigh="60"/></div>',
items: [
{
text: 'Vatika',
price:'25rs/Btl',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\vatika.jpg" width="60" heigh="60"/>',
leaf:true,
},
{
text: 'Almond Oil',
price:'50rs/Btl',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\almond.jpg" width="60" heigh="60"/>',
leaf:true,
},
{
text: 'Parachute Jasmine oil',
price:'35rs/Btl',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\hairoil.jpg" width="60" heigh="60"/>',
leaf:true,
},
]
},
{
text: 'Body Lotions 500ml',
cont:'>',
imgURL:'<div align="center"><img src="images\\pc\\lotion.jpg" width="60" heigh="60"/></div>',
items: [
{
text: 'Vaseline',
price:'40rs/Btl',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\vas.jpg" width="60" heigh="60"/>',
leaf:true,
},
{
text: 'Ponds',
price:'35rs/Btl',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\ponds.jpg" width="60" heigh="60"/>',
leaf:true,
},
{
text: 'Nivea',
price:'70rs/Btl',
element:'<div align="right"> Qty:<input type="text"/><button>Add to Cart</button></div>',
imgURL:'<img src="images\\pc\\nivea.jpg" width="60" heigh="60"/>',
leaf:true,
},
]
},
]
}]
};
and
Ext.regModel('ListItem', {
fields: ['text','price','imgURL','element','cont'],
//fields: [{name: 'text', type: 'string'},{name: 'imageURL', type: 'string'}],
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var leftNav = new Ext.NestedList({
fullscreen:true,
dock: 'center',
useTitleAsBackText: true,
title: 'Item List',
icon: 'icons/logo4_1.png',
width: '350',
html:'<div align="right"><img src="icons/cart.jpg" width="40" height="40"/></div>',
store: store,
dockedItems:[
{
xtype:'panel',
dock:'bottom',
items:
[{
xtype:'button',
ui:'confirm',
text:'Proceed to Pay',
handler:function(btn,evt)
{
window.location="cart.html";
}
}],
}],
getItemTextTpl: function(node)
{
return ' {text} <div align="right">{items}</div><div align="right">{element}</div><div align="right">{cont}</div> {imgURL}<div align="left">{price}</div>';
} ,
listeners: {
afterrender: function() {
var port=new Ext.Button({
ui: 'plain',
height:'50',
width:'50',
html:'<div align="right"><img src="icons/cart.jpg" width="50" height="50"/></div>',scope: this,
handler: function(btn,evt)
{
window.location="cart.html";
}
});
this.toolbar.add(port);
}
},
});
new Ext.Panel({
fullscreen: true,
html:'<div align="right"><img src="icons/logo4_1.png" width="100" height="40"/></div>',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype:'button',
ui:'action',
flex: 1
},
dockedItems:[leftNav]
});
all answers appreciated 🙂
It really isnt that hard, youre thinking too much in HTML code. Sencha creates HTML code from JSON configurations, which resemble objects. So a sencha configuration like this:
Ext.create('Ext.button', { text: 'test' });, will result in something like this:<input type='button'>test</input>