Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Default ComboBox for Grid (combo having local store)

    ComboBox for Grid (combo having local store)


    Many people have been having confusion over how to handle rendering of combo boxes having a separate valueField and displayField. This is how we have been using in our applications:

    Code:
    Ext.ns("Ext.ux.renderer");
    
    Ext.ux.renderer.ComboRenderer = function(options) {
        var value = options.value;
        var combo = options.combo;
    
        var returnValue = value;
        var valueField = combo.valueField;
            
        var idx = combo.store.findBy(function(record) {
            if(record.get(valueField) == value) {
                returnValue = record.get(combo.displayField);
                return true;
            }
        });
        
        // This is our application specific and might need to be removed for your apps
        if(idx < 0 && value == 0) {
            returnValue = '';
        }
        
        return returnValue;
    };
    
    Ext.ux.renderer.Combo = function(combo) {
        return function(value, meta, record) {
            return ExtHelper.renderer.ComboRenderer({value: value, meta: meta, record: record, combo: combo});
        };
    }
    Then, in grid config you can use the same renderer for combo:
    Code:
            // Your combo definition
            var addressTypeCombo = Ext.form.ComboBox();
            
            var cm = new Ext.grid.ColumnModel([
                {header: 'Type', dataIndex: 'AddressTypeId', width: 100, renderer: Ext.ux.renderer.Combo(addressTypeCombo), editor: addressTypeCombo},
                {header: 'Address', dataIndex: 'Address1', width: 130, editor: new Ext.form.TextField({maxLength:50})},
                {header: 'Address 2', dataIndex: 'Address2', width: 110, editor: new Ext.form.TextField({maxLength:50})},
                {header: 'Address 3', dataIndex: 'Address3', width: 110, editor: new Ext.form.TextField({maxLength:50})},
                {header: 'Zip Code', dataIndex: 'PostalCode', editor: new Ext.form.TextField({maxLength:10}), width: 80},
                {header: 'City', dataIndex: 'City', width: 80, editor: new Ext.form.TextField({maxLength:20})}]
            ])
    Please note that the above combo box assumes that the store for combo will be local. This approach won't work with remote combos. For remote combo, we update a "proxy" field in the grid store that is used for rendering.

    Let me know your suggestions/ improvements.

  2. #2
    Ext User
    Join Date
    Dec 2007
    Posts
    25
    Vote Rating
    0
    johnkpaul is on a distinguished road

      0  

    Default


    Do you have an example/demo of this? Does this allow for the combobox to show by default, without requiring any clicks on the editor grid panel?

  3. #3
    Sencha Premium Member neenhouse's Avatar
    Join Date
    Dec 2007
    Location
    Austin
    Posts
    168
    Vote Rating
    1
    neenhouse is on a distinguished road

      0  

    Default


    Thank you so much for this. This solved my problems: funny enough it worked for my remote comboboxes...
    I love ext.

  4. #4
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Default


    Hi Johnkpaul,

    This code is a helper method for rendering. So, it shows the selected item in grid instead of value behind it. For example, let us say, you use a combo box editor for a column and it has a name value pair such as [[1, "Yes"], [2, "No"]]. Now, when you setup the column model for the grid, you'll notice that the grid shows values 1 and 2 instead of "Yes" or "No". However, when you edit the values, combo shows up just fine. This happens because we store values 1 and 2 in the data store. So, to render the converted values, we use a custom renderer. There are lot of examples out there. So, what this sample does is - use the store of the combobox itself to read the values. So, instead of specifying a renderer for each column, you can use this helper method.

    Thanks,

    Durlabh

  5. #5
    Ext User
    Join Date
    Jun 2008
    Location
    Mountain View, CA
    Posts
    17
    Vote Rating
    0
    maggiesnyder is on a distinguished road

      0  

    Default thank you :)

    thank you :)


    Completely perfect. Thank you!

    I did change this line:
    Code:
    return ExtHelper.renderer.ComboRenderer({value: value, meta: meta, record: record, combo: combo});
    To this:
    Code:
    return Ext.ux.renderer.ComboRenderer({value: value, meta: meta, record: record, combo: combo});

  6. #6
    Ext User
    Join Date
    Jul 2008
    Posts
    13
    Vote Rating
    0
    CeeBee is on a distinguished road

      0  

    Question


    Had to do the change that maggiesnyder mentioned, but I'm still stuck using this with a combo bound to a remote store.

    My grid is bound to a remote store (let's call it grid_store) that autoloads and has the fields "country_code" and "shipping_cost". "country_code" uses a combobox-editor that is bound to another remote store (named combo_store) that has been loaded previously and has the fields "country_code" (maps to valueField) and "country_name" (maps to displayField). I'd like to show the displayField's value of the combo_store inside the grid, instead of the initially loaded grid_store value.

    For remote combo, we update a "proxy" field in the grid store that is used for rendering
    So how does this actually work?

  7. #7
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Default


    CeeBee, there are examples in Grid FAQ thread that answer your question. However, let me just summarize how we do it:

    Let us say you need CountryId and StateId in your grid. So, we'll add CountryName and StateName as two additional proxy fields in the grid. Now your fields will look something like this:

    Code:
    [{name: 'CountryId', type: 'int'}, {name: 'StateId', type: 'int'}, {name: 'CountryName', type: 'string'}, {name: 'StateName', type: 'string'}];
    Now in the grid configuration also, you'll do something like this:
    Code:
    [{header: 'Country', dataIndex: 'CountryId', editor: new Ext.form.ComboBox(), renderer: function(v, m, r) { return r.get('CountryName'); }}]
    Then, on selection of combo, to update the country name we add an event handler like this:
    Code:
    grid.on('validateedit', function(e) {
       var dataIndex = e.field;
       switch(dataIndex) {
          case "CountryId":
          case "StateId":
             var combo = grid.getColumnModel().getCellEditor(e.column, e.row).field;
             var displayFieldName = e.field.replace('Id', 'Name');
             e.record.set(displayFieldname, combo.getRawValue());
             break;
       }
    });
    I hope this helps!

  8. #8
    Ext User
    Join Date
    Nov 2008
    Posts
    2
    Vote Rating
    0
    RobbyGCT is on a distinguished road

      0  

    Default


    hi,
    thanks at first, this helped me much.
    But i have a 'problem'... its not realy a problem, but it dont looks good to users.
    Ok, thats what i got: a grid, a combobox inside the grid and a listener for dblClick on column...
    the dblClick opens a Ext.Window and if the user dblClicked on my combobox, thats inside the grid, the combobox is visible through the window.


    bye Robby
    Attached Images

  9. #9
    Ext User rootnode_'s Avatar
    Join Date
    Nov 2008
    Posts
    2
    Vote Rating
    0
    rootnode_ is on a distinguished road

      0  

    Default Should be default

    Should be default


    Good stuff. In my view this should be the default renderer for comboboxes

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by durlabh View Post
    Many people have been having confusion over how to handle rendering of combo boxes having a separate valueField and displayField. This is how we have been using in our applications:

    Code:
    Ext.ns("Ext.ux.renderer");
    
    Ext.ux.renderer.ComboRenderer = function(options) {
        var value = options.value;
        var combo = options.combo;
    
        var returnValue = value;
        var valueField = combo.valueField;
            
        var idx = combo.store.findBy(function(record) {
            if(record.get(valueField) == value) {
                returnValue = record.get(combo.displayField);
                return true;
            }
        });
        
        // This is our application specific and might need to be removed for your apps
        if(idx < 0 && value == 0) {
            returnValue = '';
        }
        
        return returnValue;
    };
    
    Ext.ux.renderer.Combo = function(combo) {
        return function(value, meta, record) {
            return ExtHelper.renderer.ComboRenderer({value: value, meta: meta, record: record, combo: combo});
        };
    }
    Then, in grid config you can use the same renderer for combo:
    Code:
            // Your combo definition
            var addressTypeCombo = Ext.form.ComboBox();
            
            var cm = new Ext.grid.ColumnModel([
                {header: 'Type', dataIndex: 'AddressTypeId', width: 100, renderer: Ext.ux.renderer.Combo(addressTypeCombo), editor: addressTypeCombo},
                {header: 'Address', dataIndex: 'Address1', width: 130, editor: new Ext.form.TextField({maxLength:50})},
                {header: 'Address 2', dataIndex: 'Address2', width: 110, editor: new Ext.form.TextField({maxLength:50})},
                {header: 'Address 3', dataIndex: 'Address3', width: 110, editor: new Ext.form.TextField({maxLength:50})},
                {header: 'Zip Code', dataIndex: 'PostalCode', editor: new Ext.form.TextField({maxLength:10}), width: 80},
                {header: 'City', dataIndex: 'City', width: 80, editor: new Ext.form.TextField({maxLength:20})}]
            ])
    Please note that the above combo box assumes that the store for combo will be local. This approach won't work with remote combos. For remote combo, we update a "proxy" field in the grid store that is used for rendering.

    Let me know your suggestions/ improvements.
    This is a very good idea. I think you should submit a Feature Request that comboRenderer be added to Ext.util.Format the same way dateRenderer is.