ExtJS v3 - 从表单面板内的网格面板访问数据

时间:2012-06-28 14:10:49

标签: javascript extjs extjs3 formpanel

我在Form中使用了一个GridPanel。

当我提交表单时,我从表单元素中获取数据没有问题,但无法读取/查看放在网格中的数据。

(基本上,我给他们一个区域来在网格中添加电子邮件地址)。

我想我可以将网格面板数据设置为表单中的隐藏值,但这并不像我想象的那样有效。

我应该采取什么方向,所以当有人提交表格时,我可以看到主要的“原因”字段(我现在可以看到)以及他们输入的每个电子邮件地址。

(我通过使用POST的按钮提交表单)。

var projection_record = Ext.data.Record.create([
    { name: 'Email'}
]);

var projections_store = new Ext.data.Store({
    reader: new Ext.data.ArrayReader({
        idIndex: 0
    }, projection_record)
});

var projections_grid = new Ext.grid.EditorGridPanel({
    store: projections_store,
    columns: [
    {
        xtype: 'gridcolumn',
        dataIndex: 'Email',
        header: 'Approval Email',
        sortable: false,
        width: 250,
        editor: new Ext.form.TextField({
            valueField: 'displayText',
            displayField: 'displayText'
        })
    },
    {
        xtype: 'actioncolumn',
        header: "Delete",
        width: 150,
        items: [{
          icon: 'images/delete.png',
          handler: function(grid, rowIndex, colIndex) {
                    var rec = store.getAt(rowIndex);
                    alert("Delete " + rec.get('Email') + " ?");
                }
          //handler: function(grid, rowIndex, colindex) {
              //var record = grid.getStore().getAt(rowIndex);
              //var id = record.get("Email");
              //window.location = '<% $base %>storage_approval_delete/' + id;
          //}
       }]
     }
    ],
    tbar: [{
        text: 'Approvers',
        icon: 'images/Add.png',
        handler: function(){
            var projection = projections_grid.getStore().recordType;
            var p = new projection({
                Email: ''
            });
            projections_grid.stopEditing();
            projections_store.insert(0,p);
            projections_grid.startEditing(0,0);
        }
    }],
    autoHeight: true,
    autoWidth: true,
    trackMouseOver: true,
    stripeRows: true
});

var simpleForm = new Ext.FormPanel ({
    labelWidth: 175,
    id: 'simpleForm',
    url:'./manager_approvals',
    method: 'POST',
    frame:true,
    title: 'Ada a New Project',
    bodyStyle:'padding:5px 5px 0',
    width: 850,
    defaultType: 'textfield',

    items: [
        {
            fieldLabel: 'Request Information',
            name: 'Description',
            xtype: 'textarea',
            allowBlank: true,
            anchor:'100%'
        },
        {
            xtype: 'fieldset',
            title: 'Approving Managers',
            autoHeight: true,
            autoWidth: true,
            collapsible: false,
            collapsed: false,
            items: [projections_grid]
        },
        {
            xtype: 'hidden',
            name: 'hidden1',
            value: projections_store
        }
    ]
});

1 个答案:

答案 0 :(得分:0)

嗯....我会认真考虑为电子邮件列表添加逗号分隔字段....

如果你一直想让他们同时提交表格和编辑网格(祝你的用户好好理解他们需要做什么),你需要做的就是提交:查找支持你的商店grid,从商店记录中获取数据值(迭代),提取所需的值,用逗号连接,最后设置隐藏字段或仅包含作为参数。

祝你好运。