2012-09-25

Update Data to MySQL After Submitting by Form (Yii + Extjs4)

I couldn't find a good way to load the data from back-end to front-end when first loading in my updating page.

But I still got it done and it's almost 2 am. I must be crazy...

controller.php
 public function actionMyController()  
 {  
      $today = date("Y-m-d H:i:s");  
      $returnOut = 0;  
      $count = 0;  
      $json = array();  
      $command = Yii::app()->db->createCommand('CALL my_SP (  
           :v_date_posted,  
           :v_reason,  
           :v_keywords);            
      $command->bindParam('v_date_posted', $today);  
      $command->bindParam('v_reason', $_POST['UIReason']);  
      $command->bindParam('v_keywords', $_POST['UIKeywords']);                      
      $count = $command->execute();       
      if ($count === 1) {  
           $json = array(  
                'success' => true,  
                'data' => array(  
                     'count' => $count,  
                     'Msg' => ''  
                )  
           );                 
      } else{  
           $json = array(  
                'success' => false,  
                'Data' => array(  
                     'count' => 0,  
                     'Msg' => 'error'  
                )  
           );                 
      }  
      echo json_encode($json);  
 }  

front-end.js
 function xFieldToArray(v, record){   
       return v.indexOf(',') > 0 ? v.split(',') : v.indexOf(' ') > 0 ? v.split(' ') : v;   
 }   
 function xFieldToDate(v, record){   
       return v ? new Date(v) : '';   
 }   
 var mainFields = [   
       {name: 'date', mapping: 'UIDate', convert: xFieldToDate},   
       {name: 'reason', mapping: 'UIReason', convert: xFieldToArray},   
       {name: 'keywords', mapping: 'UIKeywords'}   
 ];   
  Ext.define('Form.model.Record', {   
       extend: 'Ext.data.Model',   
       fields: mainFields   
 });   
 myStore = Ext.create('Ext.data.Store', {   
       id:'storeRecord',   
       model: 'Form.model.Record',    
       autoLoad: false,   
       proxy: {   
            type: 'ajax',   
            url : '/myApp/index.php?r=myPage/myController&id=1608,    
            reader: {   
                  type: 'json',   
                  root: 'data',   
                  successProperty: 'success'   
            }   
       },   
       listeners: {   
            load: function (records) {   
                  var jsonObj = {};   
                  var fields = records.getAt(0).fields;   
                  // transfer name to mapping in each field of form   
                  for( var key in fields.map )   
                          jsonObj[ fields.map[key].mapping ] = fields.map[key].convert ? fields.map[key].convert(records.getAt(0).raw[key]) : records.getAt(0).raw[key];   
                  myformPanel.getForm().setValues(jsonObj);   
            }   
       }      
 });   

Actually, I wanna load data in this way, but unfortunately this only works when the container supports store and dataIndex mapping from store to column, such as GridPanel.
 myStore = Ext.create('Ext.data.Store', {  
      ...,  
      listeners: {  
           load: function (records) {  
                //set the default value after the store loads  
                myformPanel.getForm().loadRecord(records.getAt(0));  
           }  
      }       
 }  


There is another way but still a little bit tiresome.
 myformPanel.on  
 ({  
      actioncomplete: function(form, action)  
      {  
           if (action.type == 'load')  
           {       
                // mapping and assign data from Json to UI  
                var data = action.result.data;  
                Ext.getCmp('UIKeywords').setValue(data.keywords);  
                Ext.getCmp('UIReason').setValue(data.reason);  
                Ext.getCmp('UIDate').setValue(data.date);  
           }  
      }  
 });  
 myformPanel.getForm().load({url: 'myController.php'});       


No comments:

Post a Comment