Rectangle 27 3

Ext.application({
name : 'Fiddle',

simpsonsStore : Ext.create('Ext.data.Store', {
    storeId : 'simpsonsStore',
    fields : ['name', 'email'],
    data : [
        {name : 'Lisa',email : 'lisa@simpsons.com',id:1}, 
        {name : 'Bart', email : 'bart@simpsons.com',id:2}, 
        {name : 'Homer', email : 'homer@simpsons.com',id:3},
        {name : 'Marge',email : 'marge@simpsons.com',id:4}]
}),

tagfieldstore : Ext.create('Ext.data.Store', {
    fields : ['tag', 'field'],
    data : [
        {aid:1,tag : 'tag1',field : 'lisa record1'}, 
        {aid:1,tag : 'tag3',field : 'lisa record2'}, 
        {aid:3,tag : 'tag1',field : 'homer record3'}, 
        {aid:3,tag : 'tag3',field : 'homer record4'},
        {aid:2,tag : 'tag1',field : 'bart record1'}, 
        {aid:2,tag : 'tag3',field : 'bart record2'}, 
        {aid:4,tag : 'tag1',field : 'marge record3'}, 
        {aid:4,tag : 'tag3',field : 'marge record4'}]
}),

launch : function() {

    Ext.create('Ext.grid.Panel', {
        title : 'Simpsons',
        store : this.simpsonsStore,
        columns : [{
            flex :1 ,
            text : 'Name',
            dataIndex : 'name',
        }, {
            text : 'Email',
            dataIndex : 'email',
            flex : 1
        }, {
            xtype : 'widgetcolumn',
            cellWrap : true,
            text : 'Phone',
            flex : 1,
            widget : {
                xtype: 'combo',
                store : this.tagfieldstore,
                valueField : 'tag',
                displayField : 'field',
                growMax : true, 
                listeners:{
                   expand:function(combo){
                       combo.store.clearFilter();
                      var id = combo.$widgetRecord.data.id;
                       combo.store.filterBy(function(rec){
                            return rec.data.aid == id;
                      });
                   }
                }

            }
        }],
        flex : 1,
        renderTo : Ext.getBody()
    });
}

Your fiddle does not work with ExtJs 4.2. Looks like Extjs 6 does no longer have the problem I'm experiencing. This means that I really should work towards an upgrade.

In Extjs 4.2, widgetcolumn for grid panel is not working. You need to update your extjs version.

I will update, but this is not an immediate option. I think it will take a week, because the app is really important and implements features that were not native to Ext 4.2 but are now native in Ext 6.

I now understand the difference between your solution and my need. I needed a combobox as a celleditor, you proposed a combobox as a widgetcolumn. This just leads to another question: Does a combobox in a widgetcolumn act as an editor or not ? To my understanding the selected value of a widgetcolumn combobox is not bound to the value of the row's record. Is this correct, or am I missing something ?

filter - Extjs filtering of a combobox in a grid editor - Stack Overfl...

extjs filter combobox extjs4.2
Rectangle 27 2

You can link the combo boxes this way... A selection in the first combobox is used as a parameter for the request in the second... once the parameter's value is set for the 2nd combobox's store, you can make an ajax call to your service to return the "filtered" data.

extjs - How to filter a combobox dropdown list without filtering the s...

extjs combobox store
Rectangle 27 1

Eexecute JS using selenium(How to use JavaScript with Selenium WebDriver Java). In js you can use "Ext.ComponentQuery.query('combo')[0].value" code to get combo value

javascript - How to get the selected value of ExtJS combobox through s...

javascript extjs selenium xpath
Rectangle 27 0

The name field on the combo doesn't match the field in the json response (business_Unit vs businessUnit) but also I don't think BasicForm.load will work with nested objects. After the load call you may have to manually load it.

editForm.getForm().load({url: fetchUrl, method: 'GET', success: function(form, action) {
        var combo = form.findField('business_Unit');
        combo.setValue(action.result.data.businessUnit.buiId);
    }
});

javascript - Setting a value from the server in a ComboBox in ExtJS - ...

javascript extjs
Rectangle 27 0

Here is the solution I came up with.

In my column model, I made sure that the column I am making "editable" has an id. Each cell in that column will now have a CSS class associated with it named "x-grid-col-{id}". My column id is "status" so the class was "x-grid-col-status".

I created the CSS for class "x-grid-col-status" which sets the dropdown arrow image as the background, aligned right. It also sets the cursor to pointer, so the user knows they can click on the cell.

.x-grid3-col-status
{
    background-image: url(Image/trigger-single.gif);
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
}

Next, I set up a listener for my ComboBox that listens for the 'focus' event. On focus, I expand the drop down. It is important that I had to add lazyInit: false to my ComboBox config, or else an empty list will appear when you expand. lazyInit - true to not initialize the list for this combo until the field is focused (defaults to true)

Ext.util.Format.comboRenderer = function (combo) {
            return function (value, metaData, record, rowIndex, colIndex, store) {
                var record = combo.findRecord(combo.valueField, value);
                return record ? record.get(combo.displayField) : combo.valueNotFoundText;
            }
        }        

    var combo = new Ext.form.ComboBox({
            typeAhead: true,
            triggerAction: 'all',
            lazyInit: false,
            lazyRender: true,
            mode: 'local',
            editable: false,
            store: new Ext.data.ArrayStore({
                id: 0,
                fields: [
                    'statusId',
                    'displayText'
                ],
                data: data
            }),
            valueField: 'statusId',
            displayField: 'displayText',
            listeners: {
                'focus': {
                    fn: function (comboField) {
                        comboField.doQuery(comboField.allQuery, true);
                        comboField.expand();
                    }
                    , scope: this
                }
                , 'select': {
                    fn: function (comboField, record, index) {
                        comboField.fireEvent('blur');
                    }
                    , scope: this
                }
            }
        });

        var cm = new Ext.grid.ColumnModel({
            defaults: {
                sortable: true
            },
            columns: [
                {
                    id: 'orderId',
                    header: 'ID',
                    dataIndex: 'id',
                    width: 50
                }, {
                    header: 'Status',
                    id: 'status',
                    dataIndex: 'status',
                    width: comboColumnWidth,
                    editor: combo,
                    renderer: Ext.util.Format.comboRenderer(combo)
                }, {
                    id: 'orderSummary',
                    header: 'Summary',
                    dataIndex: 'summary',
                    renderer: this.renderSummary
                }
            ]
        });

        var orderGrid = new Ext.grid.EditorGridPanel({
            store: this.getOrderStore(),
            cm: cm,
            autoExpandColumn: 'orderSummary',
            title: title,
            clicksToEdit: 1
        });

In ExtJs 3.3.1, how can I show a ComboBox drop down without click in E...

extjs combobox grid extjs3
Rectangle 27 0

The combobox does not support a buffered store as far as I know. You would need to actually render a grid in the combo and use a buffered store for the grid...the combo itself would not have a store.

Buffered and pageSize issue in store with combobox. (With ExtJs 4.2.0 ...

extjs
Rectangle 27 0

The combo box always restores the previously selected value.

It isn't so much restoring the value as the user is reselecting it after he deletes the value. I.e: with forceSelection: true the combobox insists on dropping down its menu, this means that when a user goes back into the combobox to delete an item, the combobox menu drops down with the item which was originally selected highlighted, the user then deletes the value in the combobox and tabs to the next one, the combobox looks to see what item is highlighted in the drop down list and fills it in to the field, voila, reselected.

Instead, if the user deletes the value, then presses the ESC key to close the combo drop down menu and then tabs to the next one the value will not fill itself in.

Fortunately, I didn't take long for my users to understand this and make use of the ESC key. I also added the preventMark: true config to handle the error message when this occurred.

I suppose if you really can't have this, you could add a listener to the change or even the validitychange event that checks if the field is now empty and then collapses the menu if it is. This should prevent it from reselecting when moving to another field the same way closing it with the ESC key does.

I found that if you delete the value, press the ESC key, and tab to the next field, the combo box still fills in a value using ExtJS 4.1.1a. A change listener is required to make the combo box behave as expected.

extjs4 - How To Re-Empty ComboBox when forceSelection is Set To TRUE (...

combobox extjs4
Rectangle 27 0

listeners: {
    'change': function (combo, newValue) {
        if (newValue === null)
            combo.reset();
        }
    }

PS : idea from @aur1mas

extjs4 - How To Re-Empty ComboBox when forceSelection is Set To TRUE (...

combobox extjs4
Rectangle 27 0

Ext.Msg is only a little message window, so it does not support combos nor any other component beyond a simple text with some buttons.

sencha.com/forum/ , i curious how do i change the Ext.MessageBox.js file.

javascript - extjs message show combobox - Stack Overflow

javascript extjs4
Rectangle 27 0

You can use XTemplates to manage this kind of behavior with one store and two comboboxes.

At first you have to create an XTemplate for your list of items in the combobox:

// displayfield = displayfield configured in your combobox
var template = Ext.create('Ext.XTemplate',
  '<tpl for=".">',
  '  <tpl if="[Ext.getCmp(\'combobox1\').getValue()] != id && [Ext.getCmp(\'combobox2\').getValue()] != id">',
  '    <div class="x-boundlist-item">{label}</div>',
  '  <tpl else>',
  '    <tpl if="id == null || id == \'\'">',
  '      <div class="x-boundlist-item">{label}</div>',
  '    <tpl else>',
  '      <div class="x-boundlist-item" style="font-size:0px; height:0px;"></div>',
  '    </tpl>',
  '  </tpl>',
  '</tpl>'
);

The XTemplate contains some statements to check if the specific value is already selected in one of the comboboxes. If not, then the entry will appear in the dropdown list, otherwise it will be hidden. To make it work, you have to set the template in your combobox and add some listeners to them:

// Combobox 1
{
    xtype: 'combo',
    id: 'combobox1',
    store: 'your_store',
    tpl: template,
    displayField: 'label',
    valueField: 'id',
    listeners: {
    beforeSelect: function (combo, record, index, eOpts)
    {
        // Check if the selected value is already selected in combobox2
        var cbx2value = !!Ext.getCmp('combobox2').getValue() ? Ext.getCmp('combobox2').getValue() : '';

        if (cbx2value != record.get('id') && cbx2value != record.get('id')) {
            return true; // selected entry will be selected successfully
        } else {
            return false; // selected entry will not be selected
        }
    },
    change: function ()
    {
        // Get the picker (list of items) of the other combobox and refresh it's template state
        var cbx2picker = Ext.getCmp('combobox2').getPicker();
        cbx2picker.refresh();
    }
}

// Combobox 2
{
    xtype: 'combo',
    id: 'combobox2',
    store: 'your_store',
    tpl: template,
    displayField: 'label',
    valueField: 'id',
    listeners: {
    beforeSelect: function (combo, record, index, eOpts)
    {
        // Check if the selected value is already selected in combobox2
        var cbx1value = !!Ext.getCmp('combobox1').getValue() ? Ext.getCmp('combobox1').getValue() : '';

        if (cbx1value != record.get('id') && cbx1value != record.get('id')) {
            return true; // selected entry will be selected successfully
        } else {
            return false; // selected entry will not be selected
        }
    },
    change: function ()
    {
        // Get the picker (list of items) of the other combobox and refresh it's template state
        var cbx1picker = Ext.getCmp('combobox1').getPicker();
        cbx1picker.refresh();
    }
}

It's not the ultimate solution, but for one of my projects it worked like a charm. I have simplified the example as good as possible to make the solution clearer.

Thanks for your help! But it seems like something didn't work in me. My firebug said Ext.getCmp(...) is undefined. Could you please explain?

One of the components you are trying to call doesn't exist with the given id. You can also download the "web developer" addon which shows javascript errors in a quick way.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

combobox - hide combo box value when already selected extjs - Stack Ov...

extjs combobox extjs-mvc
Rectangle 27 0

You will need two stores, one for each combo box, both filled with the same data.

combo1.on('select',function(combo, newVal) {
    combo2.getStore().filterBy(function(rec){
        return rec.get("value")!=newVal;
    })
});

so I must made 2 store for each combo box? and where do I place the function you mention above? outside var set_approval_dtl?

One store for each of the two combo boxes is two stores total. You can take my function and put it into the listeners : {select:function(combo, newVal)..., because using listeners object on a component is the same as using component.on().

oh, so each combo box has different store but the data is the same? I can't just call the combo box name. it got error on firebug, says my combo name is not define.

No you need 1 store each for 2 comboboxes.You can put the function in the afterRender of your component or you can add it as a listener to the first combobox.

Sorry I forgot something. so just put the function that Alexander mention in the first combo box?

combobox - hide combo box value when already selected extjs - Stack Ov...

extjs combobox extjs-mvc
Rectangle 27 0

carModelStore - store, which should be depended on selection in the carStore - based combo box

var carModelStore = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        fields: ['id', 'car-model'],
        root: 'rows'
    }),
    storeId: 'car-model-store',
    proxy: new Ext.data.HttpProxy({
        url: 'carmodeldataprovider.json?car-name=lamborghini'
    }),
    autoLoad: true
});


{ xtype: 'combo', name: 'car-name', fieldLabel: 'Car', mode: 'local', store: carStore, triggerAction: 'all',
    listeners: {
        select: function(combo, records, eOpts){
            var carName = records.get('car-name');  // the element selected in combo
            var carModelStore = Ext.StoreMgr.lookup("car-model-store");

            carModelStore.proxy.setUrl('carmodeldataprovider.json?car-name=' + carName, false);
            carModelStore.reload();
        }
    }

}

extjs4.1 - How to change combobox store data in ExtJS 4.1 - Stack Over...

extjs extjs4.1
Rectangle 27 0

The behavior you observe could be related to the fact that you create the combo before the window.

Use xtype to defer the creation of the checkbox to the rendering of the window.

var window = Ext.create('Ext.window.Window', {
    width: 525,
    height: 280,
    items: [{
        xtype: 'combobox',
        fieldLabel: 'Choose State',
        store: states,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr'
    }]
}).show();

Thanks, but no effect from using the xtype. Changed my code to reflect this however, since that is how most people will want to view it I think.

I have no idea where to look. As you say the fiddle is working... So there must be a difference in your case. Good luck to find it !

javascript - ExtJS 4.2.2 ComboBox fields show up behind Window - Stack...

javascript extjs combobox extjs4.2
Rectangle 27 0

You need to be doing

loadRecords by default overwrites the contents of the store with the new data.

And to add a simple record to your combo box

thanks francis. maybe I haven't described my case clearly. In my user Form I can access roles with this line of code var selectedRoleValuesFromUserModel = record.get('roles'); now I wanna add item to this list but I cannot access them in my combo handler. I will edit the question a bit.

@sina I have edited my answer. Hopefully that answers it. I don't know the model definition of a role so I can't be as precise.

combobox - Extjs keeping current select items in combo and adding new ...

extjs combobox
Rectangle 27 0

The core of the problem is that you need to hook an listener which will execute after the grid store loaded. That listener will then convert the combo grid content to the displayField content instead of valueField. Here is my resolution to this issue.

You can use this renderer in your code like the following:

EXTJS 3.2.1 EditorGridPanel - ComboBox with jsonstore - Stack Overflow

extjs
Rectangle 27 0

It sounds like you might need to change your combo's queryMode attribute to keep it from trying to recreate the store when the combo is opened. This seems to work for me.

javascript - ExtJS: Opening and closing ComboBox with Array Store beha...

javascript extjs combobox store
Rectangle 27 0

In the success listener, after the json response is loaded, I add the custom value to the store, then set the combo box to this newly added value:

success: function() {
    diagnosisStore.add({label: rec.data.diagnosis, value: rec.data.diagnosis});
    formPanel.getForm().findField('diagnosis').setValue(rec.data.diagnosis);
},

No idea why I would need to add the custom value to the store in this case when I want to use setValue, while the user can enter anything manually via keyboard.

combobox - ExtJs combo box: not populating custom value after load (fo...

extjs combobox extjs4
Rectangle 27 0

I changed the logic. Additionally send an Id of a combobox value, after that set extraProxyParams with this Id and load the store. Clean the extraProxyParams after that. So after a user searching for another value he can do it.

combobox - ExtJS paged combo with remote JSON store. Display selected ...

extjs combobox paging jsonstore
Rectangle 27 0

Have autoLoad:false and load your store manually for default values. When you really want to load the store, you can do

store.load()

combobox - Extjs Combo - Why combo is loading while I have not created...

extjs combobox extjs4 extjs4.1
Rectangle 27 0

Edit Following thing in your css.

The problem here is , it is a box component on which margintop is set and arrow is an image rendered.

But, Combo box have an element triggerClass which can be used to set style for arrow too.

combobox - ExtJs 3.4 : Margin doesn't apply for the small arrow of the...

extjs combobox margin