【问题标题】:ExtJS v3 - access data from grid panel inside a form panelExtJS v3 - 从表单面板内的网格面板访问数据
【发布时间】:2012-06-30 02:01:36
【问题描述】:

我有一个在表单中使用的 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
        }
    ]
});

【问题讨论】:

    标签: javascript extjs extjs3 formpanel


    【解决方案1】:

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

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

    祝你好运。

    【讨论】:

    • 必须有一种方法可以将存储分配给要传递的变量。我试过这些值: Ext.util.JSON.encode(projections_store.getRange(), 'data') //value: projections_store.getRange().json //value: Ext.util.JSON.encode(projections_store) / /value: Ext.util.JSON.encode(projections_store.data.items, 'data')
    • 你是什么意思分配?您需要将该数据“引用”而不是存储到隐藏字段中。数据可能会发生变化,但即使您在表单加载时成功为其设置了一些值,隐藏字段也不会更新。
    猜你喜欢
    • 2011-02-15
    • 2011-08-06
    • 1970-01-01
    • 2015-09-07
    • 1970-01-01
    • 2013-03-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多