title: How to render icon and call function when click icon
body: <p>I want to do Lock/Unlock icon button by using Renderer. If clicking the button, it will show message box yes/no to confirm. If click Yes, it should call SubmitValue function. The problem is it cannot call javascript <strong>SubmitValue</strong> function. How do I call function when click Yes confirm box? </p>
  
  <p>Renderer.js</p>
  
  <pre><code>var renderLock = function (value, p, record) {
      if (JSON.parse(value))
      {
          return '&lt;img src="Images/icon/lock.png" &gt;';
      }
      else 
      {
          return '&lt;img src="Images/icon/unlock.png" &gt;';
      }
  }
  </code></pre>
  
  <p>Common.js</p>
  
  <pre><code>var GetGrid_LockButton = function (Active, FieldId, FieldName, Grid_Name, URL) {
  return {
      menuDisabled: true
      , sortable: false
      , hidden: Permit_No_Del
      , text: 'Lock'
      , renderer: renderLock
      , align: 'center'
      , xtype: 'actioncolumn'
      , dataIndex: 'IS_LOCK'
      , width: 45
      , listeners: {
          click: function () {
              Ext.MessageBox.confirm('confirm?', function (btn) {
                  if (btn == "yes") {      
                      SubmitValue(URL, { id: rec.get(FieldId) }, "Ext.getCmp('" + Grid_Name + "').getStore().load();", "Yes");
                  }
              });
  
          }
      }
     };
  }
  </code></pre>
  
  <p>Thank you in advance.</p>