title: Sencha touch event handler for html element
body: <p>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???</p>
  
  <p>I basically want to add the price and quantity to database on button click.</p>
  
  <p>the code goes like this.</p>
  
  <pre><code>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:'&gt;',
          imgURL:'&lt;div align="center"&gt;&lt;img src="icons\\Beverages.jpg" width="60" heigh="60"/&gt;&lt;/div&gt;',
          items: [{
              text: 'Water 1Ltr',
              price:'18rs/btl',
              imgURL:'&lt;img src="images\\beverage\\water.jpg" width="60" heigh="60"/&gt;',
              element:'&lt;div align="right" width="20"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
              leaf:true,
             },
             {
              text:'Coffee',
              price:'45rs/pack',
              imgURL:'&lt;img src="images\\beverage\\bru.jpg" width="60" heigh="60"/&gt;',
              element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
              leaf: true
          }, {
              text: 'Espresso',
              price:'50rs/pack',
              imgURL:'&lt;img src="images\\beverage\\espresson.jpg" width="60" heigh="60"/&gt;',
              element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
              leaf: true
          }, {
              text: 'Redbull',
              price:'50rs/Can',
              imgURL:'&lt;img src="images\\beverage\\redbull.jpg" width="60" heigh="60"/&gt;',
              element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
              leaf: true
          }, {
              text: 'Coke',
              price:'35rs/Can',
              imgURL:'&lt;img src="images\\beverage\\coke.jpg" width="60" heigh="60"/&gt;',
              element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
              leaf: true
          }, {
              text: 'Diet Coke',
              price:'40rs/Can',
              imgURL:'&lt;img src="images\\beverage\\dietcoke.jpg" width="60" heigh="60"/&gt;',
              element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
              leaf: true
         }]
      },{
      text: 'Fruits',
      cont:'&gt;',
      imgURL:'&lt;div align="center"&gt;&lt;img src="icons\\fv.jpg" width="60" heigh="60"/&gt;&lt;/div&gt;',
      items: [{
          text: 'Bananas',
          price:'25rs/Kg',
          imgURL:'&lt;img src="images\\fv\\banana.jpg" width="60" heigh="60"/&gt;',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          leaf: true
      },
      {
          text: 'Watermelon',
          price:'15rs/Kg',
          imgURL:'&lt;img src="images\\fv\\watermelon.jpg" width="60" heigh="60"/&gt;',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text" width="20"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          leaf: true
      }
      ,
      {
          text: 'Grapes',
          cont:'&gt;',
          imgURL:'&lt;div align="center"&gt;&lt;img src="images\\fv\\grapes.jpg" width="60" heigh="60"/&gt;&lt;/div&gt;',
          items: [
          {text:'Black Grapes',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          price:'25rs/Kg',
          imgURL:'&lt;img src="images\\fv\\blackgrapes.jpg" width="60" heigh="60"/&gt;',
          leaf: true
          },
          {
          text:'Green Grapes',
          price:'20rs/Kg',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\fv\\greengrapes.jpg" width="60" heigh="60"/&gt;',
          leaf:true
          }]
      },
      {
          text: 'Pear',
          price:'125rs/Kg',
  
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\fv\\pear.jpg" width="60" heigh="60"/&gt;',
          items:[{xtype:'button',ui:'action'}],
          leaf: true
      }
      ,{
          text: 'Apple',
          price:'105rs/Kg',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button onclick="function show(){alert("hello");}"&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\fv\\apple.jpg" width="60" heigh="60"/&gt;',
          leaf: true
      }]
      },
      {
          text: 'Bakery',
          cont:'&gt;',
          imgURL:'&lt;div align="center"&gt;&lt;img src="icons\\bread_Bakery.jpg" width="60" heigh="60"/&gt;&lt;/div&gt;',
          items: [{
              text: 'Bread',
              imgURL:'&lt;div align="center"&gt;&lt;img src="images\\bread\\bread.jpg" width="60" heigh="60"/&gt;&lt;/div&gt;',
              cont:'&gt;',
              items: [{
               text: 'White Bread',
               price:'18rs/Pound',
               element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
               imgURL:'&lt;img src="images\\bread\\white.jpg" width="60" heigh="60"/&gt;',
              leaf: true,
              },
              {
              text: 'Brown Bread',
              price:'25rs/Pound',
              element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
              imgURL:'&lt;img src="images\\bread\\brown.jpg" width="60" heigh="60"/&gt;',
              leaf: true,
              },
              ]
      },{
          text: 'Stuffed Bread Rolls',
          price:'15rs/Piece',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\bread\\rolls.jpg" width="60" heigh="60"/&gt;',
          leaf: true
      },{
          text: 'Cup Cakes',
          price:'10rs/Piece',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\bread\\cupcake.jpg" width="60" heigh="60"/&gt;',
          leaf: true
      }]
  },{
      text: 'Personal Care',
      cont:'&gt;',
      imgURL:'&lt;div align="center"&gt;&lt;img src="icons\\Personal_Care.jpg" width="60" heigh="60"/&gt;&lt;/div&gt;',
      items: [
      {
          text: 'Shampoo  500ml',
          cont:'&gt;',
          imgURL:'&lt;div align="center"&gt;&lt;img src="images\\pc\\shampoo.jpg" width="60" heigh="60"/&gt;&lt;/div&gt;',
          items: [
      {
          text: 'Dove',
          price:'59rs/Btl',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\shampoo.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      {
          text: 'Sunsilk',
          price:'62rs/Btl',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\sunsilk.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      {
          text: 'Garnier',
          price:'70rs/Btl',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\garnier.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      ]
      },
      {
          text: 'Soaps  50gms',
          cont:'&gt;',
          imgURL:'&lt;div align="center"&gt;&lt;img src="images\\pc\\soap.jpg" width="60" heigh="60"/&gt; &lt;/div&gt;',
          items: [
      {
          text: 'Dove',
          price:'25rs/Piece',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\dove.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      {
          text: 'Pears',
          price:'28rs/Piece',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\pears.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      {
          text: 'Lux',
          price:'20rs/Piece',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\lux.jif" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      ]
      },
      {
          text: 'Hair Oil  500ml',
          cont:'&gt;',
          imgURL:'&lt;div align="center"&gt;&lt;img src="images\\pc\\hairoil.jpg" width="60" heigh="60"/&gt;&lt;/div&gt;',
          items: [
      {
          text: 'Vatika',
          price:'25rs/Btl',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\vatika.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      {
          text: 'Almond Oil',
          price:'50rs/Btl',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\almond.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      {
          text: 'Parachute Jasmine oil',
          price:'35rs/Btl',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\hairoil.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      ]
      },
      {
          text: 'Body Lotions  500ml',
          cont:'&gt;',
          imgURL:'&lt;div align="center"&gt;&lt;img src="images\\pc\\lotion.jpg" width="60" heigh="60"/&gt;&lt;/div&gt;',
          items: [
      {
          text: 'Vaseline',
          price:'40rs/Btl',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\vas.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      {
          text: 'Ponds',
          price:'35rs/Btl',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\ponds.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      {
          text: 'Nivea',
          price:'70rs/Btl',
          element:'&lt;div align="right"&gt; Qty:&lt;input type="text"/&gt;&lt;button&gt;Add to Cart&lt;/button&gt;&lt;/div&gt;',
          imgURL:'&lt;img src="images\\pc\\nivea.jpg" width="60" heigh="60"/&gt;',
          leaf:true,
      },
      ]
      },
  
      ]
  }]
  </code></pre>
  
  <p>};</p>
  
  <p>and </p>
  
  <pre><code> 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:'&lt;div align="right"&gt;&lt;img src="icons/cart.jpg" width="40" height="40"/&gt;&lt;/div&gt;',
      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} &lt;div align="right"&gt;{items}&lt;/div&gt;&lt;div align="right"&gt;{element}&lt;/div&gt;&lt;div align="right"&gt;{cont}&lt;/div&gt; {imgURL}&lt;div align="left"&gt;{price}&lt;/div&gt;';
      }   ,
      listeners: {
      afterrender: function() {
      var port=new Ext.Button({
              ui: 'plain',
              height:'50',
              width:'50',
              html:'&lt;div align="right"&gt;&lt;img src="icons/cart.jpg" width="50" height="50"/&gt;&lt;/div&gt;',scope: this,
              handler: function(btn,evt)
              {
              window.location="cart.html";
              }
          });
          this.toolbar.add(port);
      }
  },
  });
  
  new Ext.Panel({
      fullscreen: true,
        html:'&lt;div align="right"&gt;&lt;img src="icons/logo4_1.png" width="100" height="40"/&gt;&lt;/div&gt;',
      layout: {
          type: 'vbox',
          align: 'stretch'
  
      },
      defaults: {
      xtype:'button',
      ui:'action',
          flex: 1
      },
      dockedItems:[leftNav]
  });
  </code></pre>
  
  <p>all answers appreciated :)</p>