扩展CompositeField以在EditorGridPanels中使用?

时间:2010-08-16 19:43:48

标签: javascript extjs

我一直致力于创建一个与多个地址一起使用的EditorGridPanel,却没有太大的成功。请注意,客户希望将地址位存储在单独的部分中,但格式化为标准地址。因此,用于地址输入的一般文本区域和具有完全离散字段方法的方法都已用完。

这就是CompositeField发挥作用的地方。我一直在玩扩展Column和Composite字段,以使编辑器以所需的方式工作。它已经达到了某种程度的作用(如果你点击它就会显示),但会抛出错误“this.ownerCt is undefined”。从一些谷歌搜索,我看到这是事物实例化的顺序问题,但我不知道如何在以后保持其封装的同时实例化编辑器。

代码:

Framework.AddressEditorField = Ext.extend(Ext.form.CompositeField,{
    initComponent: function() {
        Ext.apply(this,{
            items:[
                {name:'test',xtype:'textfield',width:50},
                {name:'test2',xtype:'textfield',width:50}
            ]
        });
        Framework.AddressEditorField.superclass.initComponent.apply(this);
    }
});

Framework.AddressEditor = Ext.extend(Ext.grid.Column,{
    width:220,
    editable:true,
    constructor: function(cfg) {
        this.editor = new Framework.AddressEditorField();
        Framework.AddressEditor.superclass.constructor.call(this, cfg);
        this.text="";
        if(!this.id){
            this.id = Ext.id();
        }
        this.renderer = this.renderer.createDelegate(this);
    },
    init : function(grid){
        this.grid = grid;

    },

    renderer : function(v, p, record){
        p.css += ' x-grid3-address-col-td';
        var template = new Ext.XTemplate("<pre class='{0}'><tpl if='careof!=\"\"'>{careof}\n</tpl>{address1}\n<tpl if='address2!=\"\"'>{address2}\n</tpl>{city}, {state} {zip}<tpl if='country!=\"\">\n{country}</tpl></pre>")
        var t = template.applyTemplate(record.data);
        return String.format(t, this.createId());
    },

    createId : function(){
        return 'x-grid3-cc-' + this.id;
    }
});

以及EditorGridPanel的相关部分:

{xtype:'fieldset',itemId:'mailGridFieldset',title:'Addresses',items:{
                    xtype:'editorgrid',
                    unstyled:true,
                    itemId:'mailGrid',
                    hideHeaders:true,
                    autoHeight:true,
                    width:450,
                    clicksToEdit:1,
                    defaultMailType:'Home',
                    store:this.addressStore,
                    border: false,
                    columns:[
                        {
                            editable:true,dataIndex:'address_type',editor:combo,renderer:Ext.util.Format.comboRenderer(combo)
                        },
                        new Framework.AddressEditor(),
                        defaultBoxMailing
                    ],
                    sm:new Ext.grid.RowSelectionModel()
                }}

考虑到我没有找到许多扩展CompositeField或Column的示例,我确信我实际上做错了。任何智慧的话语?

感谢。

1 个答案:

答案 0 :(得分:0)

只需绕过它并在单元格上单击显示一个模式窗口,其中包含用户可以输入/编辑数据的表单。