1. #1
    Ext User
    Join Date
    Mar 2010
    Posts
    6
    Vote Rating
    0
    cdmn is on a distinguished road

      0  

    Default Can't get simple compositefield to work

    Can't get simple compositefield to work


    Hi there all,

    It's pretty simple.
    I want to have form like this:

    --
    Label Textfield Button
    Label Grid Grid

    Button (fbar)
    ---

    So, basically, my FormPanel object looks like this:

    Code:
    MergeTypesForm = new Ext.form.FormPanel({
        anchor: '100% 100%',
        //frame: true,
        buttonAlign: 'left',
        title: 'Merge entity types',
        items:[
            {
                xtype: 'compositefield',
                fieldLabel: 'Search for type',
                items: [
                    new Ext.form.ComboBox({
                        id: 'search-type',
                        name: 'orig_entity',
                        minChars: 2,
                        store: AutoCompleteStore,
                        displayField: 'entity_value',
                        typeAhead: true,
                        mode: 'remote',
                        queryParam: 'query',
                        hideTrigger: true,
                        selectOnFocus: true,
                        allowBlank: false,
                        listeners: {
                            change: function()
                            {
                                console.log('click');
                            }
                        }
                    }),
                    {
                        xtype: 'button',
                        text: 'load types',
                        handler: function()
                        {
                            TypeStore.load({
                                params: {
                                    entity: Ext.getCmp('search-type').value 
                                }
                            });
                        }
                    }
                ]
            },
            {
                xtype: 'compositefield',
                fieldLabel: 'Merge types',
                items: [
                    {
                        xtype: 'grid',
                        id: 'multi-left',
                        width: 300,
                        height: 100,
                        enableColumnHide: false,
                        enableHdMenu: false,
                        hideHeaders: true,
                        store: TypeStore,
                        autoExpandColumn: 'text',
                        loadMask: true,
                        cm: new Ext.grid.ColumnModel({
                            columns:[
                                {
                                    id: 'text',
                                    header: 'From value',
                                    dataIndex: 'text'
                                }
                            ]
                        })
                    },
                    {
                        xtype: 'grid',
                        id: 'multi-right',
                        width: 300,
                        height: 100,
                        enableColumnHide: false,
                        enableHdMenu: false,
                        hideHeaders: true,
                        store: TypeStore,
                        autoExpandColumn: 'text',
                        loadMask: true,
                        sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
                        cm: new Ext.grid.ColumnModel({
                            columns:[
                                {
                                    id: 'text',
                                    header: 'From value',
                                    dataIndex: 'text'
                                }
                            ]
                        })
                    }
                ]
            }
        ],
        buttons: [{text: 'Save'}]
    });
    If I remove second compositefield item, the one with Grids, it's all good.
    Error, which I'm getting is:
    this.items.items[0] is undefined
    l.setAttribute('for', this.items.items[0].id)

  2. #2
    Ext User burn's Avatar
    Join Date
    Mar 2007
    Location
    Italy
    Posts
    69
    Vote Rating
    0
    burn is on a distinguished road

      0  

    Default


    You can only put together Ext.form.* components inside a compositeField, at the moment.

    Going as far as to creating a compositeField that contains grids is probably beyond what I can find useful, though I'm very disappointed that I can't use it to append buttons beside fields with it, it was the very first thing I thought I'd use it for. I hope in the future the compositeField will be more flexible.

  3. #3
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    Quote Originally Posted by burn View Post
    You can only put together Ext.form.* components inside a compositeField, at the moment.

    Going as far as to creating a compositeField that contains grids is probably beyond what I can find useful, though I'm very disappointed that I can't use it to append buttons beside fields with it, it was the very first thing I thought I'd use it for. I hope in the future the compositeField will be more flexible.
    I was able to add a button to a composite field:

    Code:
    this.alertLink = new Ext.form.TextField({
    	name: 'alert_link_fake',
    	hideLabel: true,
    	emptyText: "e.g., http://www.AssociationVoice.com",
    	width: 273
    });
    		
    this.alertLinkButton = new Ext.Button({
    	text: "Browse",
    	width: 70,
    	listeners: {
    		click: function(btn, e) {
    			window.open('blah','link','height=480,width=460,resizable=no');
    		},
    		scope: this
    	}
    });
    		
    this.fieldArray.push(new Ext.form.CompositeField({
    	fieldLabel:"Alert Link",
    	width: 350,
    	items: [
    		this.alertLink,
    		this.alertLinkButton
    	]
    }));

  4. #4
    Ext User
    Join Date
    Mar 2010
    Posts
    6
    Vote Rating
    0
    cdmn is on a distinguished road

      0  

    Default


    zhegwood is right, you can have:

    Label | Textfield | Button

    If you took my example and remove Grid items, you will get "label | textfield | button"

  5. #5
    Sencha User
    Join Date
    Dec 2009
    Posts
    52
    Vote Rating
    6
    TonyBones is on a distinguished road

      0  

    Default


    While this works, the button object is not part of the compositefield's items array, so it won't pass along disable/enable events or setReadOnly calls to the button. Works fine for the textfield. Anyone know of a workaround?