简体   繁体   中英

Sencha touch event handler for html element

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>

if you are using javascript you can do it in html by adding this

onClick="javascript:nameTaps">{Name}

and define a nameTaps function for handler.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM