Bind Ext данные формы в GridPanel в ExtJS

Question

Я создал демо-страницу, используя ExtJS в первый раз.

Я создал файл .JS, как показано ниже.

Ext.require([ 
//'Ext.form.*', 
//'Ext.layout.container.Column', 
//'Ext.tab.Panel' 

    '*' 
]); 

Ext.onReady(function() { 
    Ext.QuickTips.init(); 

    var bd = Ext.getBody(); 
    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'; 
    var simple = Ext.widget({ 
     xtype: 'form', 
     layout: 'form', 
     collapsible: true, 
     id: 'userForm', 
     frame: true, 
     title: 'User Details', 
     bodyPadding: '5 5 0', 
     align: 'center', 
     width: 350, 
     buttonAlign: 'center', 
     fieldDefaults: { 
      msgTarget: 'side', 
      labelWidth: 75 
     }, 
     defaultType: 'textfield', 
     items: [{ 
      id: 'txtName', 
      fieldLabel: 'Name', 
      name: 'name', 
      afterLabelTextTpl: required, 
      allowBlank: false 
     }, { 
      id: 'dDOJ', 
      fieldLabel: 'Date Of Joining', 
      name: 'doj', 
      xtype: 'datefield', 
      format: 'd/m/Y', 
      afterLabelTextTpl: required, 
      allowBlank: false 
     }, { 
      id: 'txtAge', 
      fieldLabel: 'Age', 
      name: 'age', 
      xtype: 'numberfield', 
      minValue: 0, 
      maxValue: 100, 
      afterLabelTextTpl: required, 
      allowBlank: false 
     }, { 
      id: 'chkActive', 
      xtype: 'checkbox', 
      boxLabel: 'Active', 
      name: 'cb' 
}], 

      buttons: [{ 
       text: 'ADD', 
       listeners: { 
        click: { 

         fn: function() { 
          debugger; 
          if (Ext.getCmp('txtName').getValue() == "" || Ext.getCmp('dDOJ').getValue() == "" || Ext.getCmp('txtAge').getValue() == "") { 
           alert("Please Enter All Required Details!"); 
           return false; 
          } 
          var reply = confirm("Are You Sure You Want To Save?") 
          if (reply != false) { 
           fnShowGrid(); 
          } 
         } 
        } 
       } 
}] 
      }); 
      simple.render(document.body); 
     }); 
     function fnShowGrid() { 
      debugger; 
      var vName = Ext.getCmp('txtName').getValue(); 
      var vDOJ = Ext.Date.format(Ext.getCmp('dDOJ').getValue(), 'd/m/Y'); 
      var vAge = Ext.getCmp('txtAge').getValue(); 
      var vIsActive = "InActive"; 
      if (Ext.getCmp('chkActive').getValue() == true) { 
       vIsActive = "Active"; 
      } 
      var store = Ext.create('Ext.data.ArrayStore', { 
       storeId: 'myStore', 
       idIndex: 0, 
       fields: [ 
          { name: 'name' }, 
          { name: 'doj' }, 
          { name: 'age' }, 
          { name: 'active' } 
         ], 
       //data: { name: vName, doj: vDOJ, age: vAge, active: vIsActive} 
       data: [[vName, vDOJ, vAge, vIsActive]] 
      }); 

      store.load({ 
       params: { 
        start: 1, 
        limit: 3 
       } 
      }); 

      Ext.create('Ext.grid.Panel', { 
       title: 'User Details', 
       store: store, 
       columns: [ 
      { 
       header: 'Name', 
       width: 160, 
       sortable: true, 
       dataIndex: 'name' 
      }, 
      { 
       header: 'Date Of Join', 
       width: 75, 
       sortable: true, 
       dataIndex: 'doj' 
      }, 
      { 
       header: 'Age', 
       width: 75, 
       sortable: true, 
       dataIndex: 'age' 
      }, 
      { 
       header: 'Active', 
       width: 75, 
       sortable: true, 
       dataIndex: 'active' 
}], 

       height: 200, 
       width: 400, 
       renderTo: Ext.getBody() 
      }); 
      //detailsGrid.render(document.body); 
     } 

Отображается gridPanel. Но каждый раз добавляйте новые данные, создавая новую сетку!

Я хочу показать GridPanel только один раз включая все перед тем, как добавить данные.

Вот скрипка: http://jsfiddle.net/pratikhsoni/wc9mD/1/

Answer 1

Вот рабочий пример, основанный на вашей скрипке!

Ext.require([ 
'*' 
]); 

     store = Ext.create('Ext.data.ArrayStore', { 
      storeId: 'myStore', 
      idIndex: 0, 
      fields: [ 
         { name: 'name' }, 
         { name: 'doj' }, 
         { name: 'age' }, 
         { name: 'active' } 
        ], 
      //data: { name: vName, doj: vDOJ, age: vAge, active: vIsActive} 
     }); 

Ext.onReady(function() { 
Ext.QuickTips.init(); 

var bd = Ext.getBody(); 
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'; 
var simple = Ext.widget({ 
    xtype: 'form', 
    layout: 'form', 
    collapsible: true, 
    id: 'userForm', 
    frame: true, 
    title: 'User Details', 
    bodyPadding: '5 5 0', 
    align: 'center', 
    width: 350, 
    buttonAlign: 'center', 
    fieldDefaults: { 
     msgTarget: 'side', 
     labelWidth: 75 
    }, 
    defaultType: 'textfield', 
    items: [{ 
     id: 'txtName', 
     fieldLabel: 'Name', 
     name: 'name', 
     afterLabelTextTpl: required, 
     allowBlank: false 
    }, { 
     id: 'dDOJ', 
     fieldLabel: 'Date Of Joining', 
     name: 'doj', 
     xtype: 'datefield', 
     format: 'd/m/Y', 
     afterLabelTextTpl: required, 
     allowBlank: false 
    }, { 
     id: 'txtAge', 
     fieldLabel: 'Age', 
     name: 'age', 
     xtype: 'numberfield', 
     minValue: 0, 
     maxValue: 100, 
     afterLabelTextTpl: required, 
     allowBlank: false 
    }, { 
     id: 'chkActive', 
     xtype: 'checkbox', 
     boxLabel: 'Active', 
     name: 'cb' 
}], 

     buttons: [{ 
      text: 'ADD', 
      listeners: { 
       click: { 

        fn: function() { 
         debugger; 
         if (Ext.getCmp('txtName').getValue() == "" || Ext.getCmp('dDOJ').getValue() == "" || Ext.getCmp('txtAge').getValue() == "") { 
          alert("Please Enter All Required Details!"); 
          return false; 
         } 
         var reply = confirm("Are You Sure You Want To Save?") 
         if (reply != false) { 
          fnShowGrid(); 
         } 
        } 
       } 
      } 
}] 
     }); 
     simple.render(document.body); 
    }); 
    function fnShowGrid() { 
     debugger; 
     var vName = Ext.getCmp('txtName').getValue(); 
     var vDOJ = Ext.Date.format(Ext.getCmp('dDOJ').getValue(), 'd/m/Y'); 
     var vAge = Ext.getCmp('txtAge').getValue(); 
     var vIsActive = "InActive"; 
     if (Ext.getCmp('chkActive').getValue() == true) { 
      vIsActive = "Active"; 
     } 

     if (!Ext.getCmp('sample-grid')) { 
      store.add({ 
       name: vName, 
       doj: vDOJ, 
       age: vAge, 
       active: vIsActive 
      }); 
      Ext.create('Ext.grid.Panel', { 
       title: 'User Details', 
       store: store, 
       id: 'sample-grid', 
       columns: [ 
        { 
         header: 'Name', 
         width: 160, 
         sortable: true, 
         dataIndex: 'name' 
        }, 
        { 
         header: 'Date Of Join', 
         width: 75, 
         sortable: true, 
         dataIndex: 'doj'        
        }, 
        { 
         header: 'Age', 
         width: 75, 
         sortable: true, 
         dataIndex: 'age'        
        }, 
        { 
         header: 'Active', 
         width: 75, 
         sortable: true, 
         dataIndex: 'active'        
        } 
       ], 
       height: 200, 
       width: 400, 
       renderTo: Ext.getBody() 
      }); 
     } else { 
      store.add({ 
       name: vName, 
       doj: vDOJ, 
       age: vAge, 
       active: vIsActive 
      }); 
     } 
     } 

Answer 2

Прежде всего.

Его очень приятно видеть, что вы получаете контакт с EXT js. Ошибка, которую я хотел бы выделить в вашем коде.

1. if (reply != false) { 
      fnShowGrid(); 
     } 

В этом вы вызываете вашу сетку, чтобы быть создана который вызывается, почему вы создаете новую сетку. вам просто нужно обновить магазин.

Подход: Вы должны позвонить ему только один раз, если он существует, и если да, то обновите магазин, как это.

if (reply != false) { 
       if(!Ext.getCmp('hello')) { 
       fnShowGrid(); 
       } else { 
        var store=Ext.getCmp('hello').getStore(); 

        store.add ({ 
           name: 'sadad', 
           doj:'25/01/2015', 
           age:'26', 
           active:'false' 
           }); 
           store.reload(); 
          } 

        } 

Так что вам нужно обновить магазин, чтобы добавить новые записи. Я теперь жестко закодировал, вы можете получить значения, которые у вас есть при создании.

Обновлено скрипка.

Fiddle