使用extjs将表单值添加到网格中

时间:2014-11-07 17:27:29

标签: javascript extjs extjs4

在我的JavaScript文件中,我有以下商店变量:

Ext.onReady(function() {
 var store2 = Ext.create('Ext.data.Store', {

 storeId : 'employeeStore',
 fields : [ 'firstname', 'lastname', 'age' ],
 data : [ {
 firstname : "Michael",
 lastname : "Scott",
 age : "7",
 }, {
 firstname : "Caroline",
 lastname : "Schrute",
 age : "2",
 }, {
 firstname : "Jim",
 lastname : "Halpert",
 age : "3"
 }, {
 firstname : "Kevin",
 lastname : "Malone",
 age : "4",
 }, {
 firstname : "Angela",
 lastname : "Martin",
 age : "5",
 } ]
     });

在我的面板中有几行我有几个表单字段:

Ext.create('Ext.form.Panel', {
    title : 'Person Info',
    labelWidth : 75,

    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    width : 900,
    renderTo : Ext.getBody(),
    layout : 'column',
    // arrange fieldsets side by side
    items : [
            {

                // ***** Person Info*****
                // Fieldset in Column 1 - collapsible via toggle button
                xtype : 'fieldset',
                columnWidth : 0.5,
                title : 'Person Details',
                collapsible : true,
                defaultType : 'textfield',
                defaults : {
                    anchor : '100%'
                },
                layout : 'anchor',
                items : [
                        {
                            fieldLabel : 'First Name:',
                            name : 'PersonFirstName'
                        },
                        {
                            fieldLabel : 'Last Name:',
                            name : 'PersonLastname'
                        } 
  (etc...)

在这个面板中我还有一个按钮,假设在点击时将值存储到网格中

{
                text : 'Add Person',
                xtype : 'button',
                // margin: '0 0 0 100',
                formBind : true,
                // only enabled once the form is valid
                disabled : true,
                handler : function() {

                    // write code to add all fields to the grid
                    var form = this.up('form').getForm();
                    var vals = form.getValues();
                    store2.add(vals);
                }

            },


            {
                xtype : 'grid',
                title : 'Family Details',
                store : Ext.data.StoreManager.lookup('employeeStore'),
                columns : [ {
                    text : 'First Name',
                    dataIndex : 'firstname',
                    type : 'string'
                }, {
                    text : 'Last Name',
                    dataIndex : 'lastname',
                    type : 'string'
                }, {
                    text : 'Age',
                    dataIndex : 'age',
                    type : 'string',

                }, ],
                width : 400,
                forceFit : true,
                renderTo : Ext.getBody()
            } ]

当我按下按钮时,我无法看到网格中的值。它只返回一个空行。

3 个答案:

答案 0 :(得分:0)

您可能必须将代理配置添加到商店并检查一次。 有关详情,请参阅sencha here中的此示例 并检查您的商店是否装满。

答案 1 :(得分:0)

很难说出问题究竟在哪里。我将从以下开始:

  1. 从网格中删除所有列并仅保留一列。 (例如姓氏) 此步骤将检查是否发生了问题,因为将数据映射到状态。

  2. 单击按钮时,首先使用虚拟数据,以便查看附加到商店的工作正常。

    var objectCollection = new Array();

    var objectItem = new Object();

    objectItem.lastname =" TestName&#34 ;;

    objectCollection.push(objectItem);

    store2.loadData(objectCollection);

  3. 此外,我发现您在商店中定义了值,但未使用' autoLoad'属性。 它应该填充为true(' autoLoad:true')。

答案 2 :(得分:0)

表单字段名称应与网格列数据索引匹配。在我们的案例表格中,人名的字段名是"名称:' PersonFirstName'"所以网格列的数据索引Firs名称应为" PersonFirstName"反之亦然。