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?

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."