Langsung ke konten utama

Form Layout individual margin

var header_form_des = new Ext.FormPanel({     
  url:'', 
  layout:'column',
        width:400,
  border:true,
  frame:false,
  items: [{   
   border:false,
   margin: '5px 0px 0px 5px',
   items: [{
    xtype      : 'fieldcontainer',    
    items: [{     
      xtype      : 'label',
      width: 50,
      forId: 'batch_des',
      text: 'Batch #:',
    }]
   }]
  },{   
   border:false,
   margin: '5px 0px 0px 5px',
   items: [{
    xtype      : 'fieldcontainer',    
    items: [{     
      xtype      : 'textfield',
      width: 75,
      id         : 'batch_des',
      name       : 'batch_des',
      allowBlank : true,
      readOnly : true,
            fieldStyle  :'background-image:none;background-color:#BDBDBD', 
    }]
   }]
  },{   
   border:false,
   margin: '5px 0px 0px 5px',
   items: [{
    xtype      : 'fieldcontainer',    
    items: [{     
      xtype      : 'label',
      width: 50,
      forId: 'script_promo',
      text: 'Script: ',
    }]
   }]
  },
  {
   border:false,
   margin: '5px 0px 0px 5px',
      height:45,
   items: [{
    xtype      : 'fieldcontainer',    
    items: [{
      xtype: 'combo',      
      width: 215,
      emptyText  : '--Select--', 
      typeAhead: false,            
      id:'script_promo',     
      name:'script_promo',
      store: store_scripts,
      displayField: 'MESSAGE',
      valueField  : 'SCRIPT_ID', 
      listeners: {
       expand: function(combobox) {
        //combobox.getPicker().setLoading(false);
       },
       select : function(combobox){
        //Ext.getCmp('message_tab').setValue(this.value);
       }
      }       
    }]
   }] 
  },{   
   border:false,
      frame:false,
   margin: '0px 0px 0px 2px',   
   items: [{
    xtype      : 'fieldcontainer',    
    items: [{
      xtype      : 'button', 
      width: 100,
      text : 'SUBMIT',
      handler: function() {
          var jsonData = Ext.encode(Ext.pluck(secondGridStore.data.items, 'data')),
           script   = Ext.getCmp('script_promo').getValue(),
        totalCount = secondGridStore.getCount()  ;
                
       if(script != null && totalCount > 0 )
       {                             
        Ext.getBody().mask('Processing, please wait...', 'x-mask-loading');
         Ext.Ajax.request({
          url: 'mncshop/sms_dispatch/submit',
          async:true,
          method : 'POST',
          params: {
           vNotes     :  'TEST FORM',      
           records    :  jsonData,
           vScript_Id :  script
          },
          success: function(response){
           obj = Ext.JSON.decode(response.responseText);
           Ext.getBody().unmask();
           if(obj.status == false)
           {
               display_msg(obj.message);     
           }
           else
           {
            Ext.getCmp('batch_des').setValue(obj.batch_no);
            //refresh source grid
            store_history_sms.load();
            //purge destination grid
            secondGridStore.removeAll();
             display_msg(obj.message); 
           } 
         }
        });
       }
                            else
                            {
                               display_msg('Harap lengkapi data terlebih dahulu');   
                            }       
      } 
    }]
   }]
  },{   
   border:false,
      frame:false,
   margin: '0px 0px 0px 2px',
   items: [{
    xtype      : 'fieldcontainer',    
    items: [{
      xtype      : 'button', 
      width: 100,
      text : 'CLEAR',
                        handler : function(){
          //refresh source grid
       store_history_sms.load();
       //purge destination grid
       secondGridStore.removeAll(); 
      }
    }]
   }]
  }]
    });

Komentar

Popular Posts

Extjs html class render

Ext.select('.datepicker').each(function(el){ new Ext.form.DateField({ allowBlank : true, renderTo: el, format:'m-d-Y', editable:false, width:140, fieldCls : 'tanggal x-form-field x-form-text x-trigger-noedit', }); }); Ext.select('.note').each(function(el){ new Ext.form.field.TextArea({ allowBlank : false, renderTo: el, grow : true, hideLabel : true, fieldCls : 'pesan x-form-field x-form-text x-trigger-noedit', }); });