Results 1 to 2 of 2

Thread: [Solved] Ext.Editor for table cells (not in grid)

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Vote Rating

    Default [Solved] Ext.Editor for table cells (not in grid)


    I've seen the use of Ext.Editor in the context of a grid, and I'd like to use it for table cells... but how? This is the concrete example (part of an app I'm still porting to Ext 2):

    Note that on the right side there are 3 tables (with headers "LDR Cabecera", "008 General" and "008 Libros"). Most of the cells in those tables are associated with a data element; each cell displays a text (a short form of the name of the data element), and a code (the value of the data element). For example, "Aud" stands for "Audience", and "#" is one of a list of possible values.

    My current approach to editing those cells is: a click on a cell opens a modal Window, the Window displays an HTML select with one option per available code, the user selects a code, then closes the window, and the new cell's value is set.

    It seems that opening a Window might be a bit excessive, since in most cases displaying a ComboBox would be enough. That's where I began to consider the Ext.Editor solution.

    Note that when displaying the list of available options, each option should be displayed in an extended way, that is, each code should be displayed together with its description. For example, in the case of "Audience", the list should read something like this:

    # - Unknown or not specified
    a - Preschool
    b - Primary
    c - Pre-adolescent
    d - Adolescent
    e - Adult
    f - Specialized
    g - General
    j - Juvenile
    (I've probably provided more info than is needed, just to give more context.)

    My question is: how should I attach an Ext.Editor to these table cells? Or, for that matter, to an arbitrary element?

    Any suggestions are welcome.
    Last edited by efege; 31 May 2008 at 7:51 PM. Reason: clarified question
    Fernando G

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Vote Rating


    No replies? No problem.

    I found a solution -- as usual, it was just a matter of taking some time to study and test, test, test...

    This is my test code. First version, surely may be improved.

    var style = "<style>td {border: 1px solid #999; padding: 0.3em; font-size: 11px; background: white; cursor: pointer;} td input {cursor: pointer;}</style>";
    var html = "<table id='myTable'><tr id='myRow'></tr></table>";
    Ext.getBody().update(style + html);
      For each data element, we have:
        - an with fields ['code', 'description']
        - a Ext.form.ComboBox bound to that Store
        - an Ext.Editor that uses that ComboBox
        - an HTML table cell that displays the current value of the data element; the Editor is bound to the cell
    dataElements = {
        'Audience': {
            shortName: 'Aud',
            data: [['A1', 'Audience 1'], ['A2', 'Audience 2'], ['A3', 'Audience 3']]
        'Language': {
            shortName: 'Lang',
            data: [['L1', 'Language 1'], ['L2', 'Language 2'], ['L3', 'Language 3'], ['L4', 'Language 4'],
                   ['L5', 'Language 5'], ['L6', 'Language 6'], ['L7', 'Language 7'], ['L8', 'Language 8'],
                   ['L9', 'Language 9'], ['L10', 'Language 10'], ['L11', 'Language 11'], ['L12', 'Language 12']]
        'Country': {
            shortName: 'Ctry',
            data: [['C1', 'Country 1'], ['C2', 'Country 2'], ['C3', 'Country 3']]
    MyCombo = Ext.extend(Ext.form.ComboBox, {
        mode: 'local',
        editable: false,
        forceSelection: true,
        valueField: 'code',
        //typeAhead: true,
        //selectOnFocus: true,
        triggerAction: 'all',
        lazyRender: true,  // docs say: "should always be used when rendering into an Ext.Editor"
        tpl: '<tpl for="."><div class="x-combo-list-item">{code} - {description}</div></tpl>',
        listClass: 'x-combo-list-small'
    MyEditor = Ext.extend(Ext.Editor, {
        hideEl: false,
        alignment: "tl-bl",  //"l-bl",
        constrain: true,
        cancelOnEsc: true,
        ignoreNoChange: true
    // Build cells
    for (var de in dataElements) {
        var cell = document.createElement("td");
        cell.innerHTML = dataElements[de].shortName + ': '; // + dataElements[de].data[1][1]; = new{
            fields: ['code', 'description'],
            data: dataElements[de].data,
            id: 0
        cell.combo = new MyCombo({
            title: de
        cell.editor = new MyEditor(cell.combo);
        cell.combo.on('select', function(){this.editor.hide();}, cell);
        cell.editor.on("complete", function(editor, newValue, oldValue){
            this.boundEl.dom.input.value = newValue;
        var input = document.createElement("input");
        input.size = 1;
        input.readOnly = true; = "none";
        cell.input = input;
        // Assign some random value to the cell
        var len = dataElements[de].data.length;
        input.value = dataElements[de].data[Math.floor(Math.random()*len)][0];
    Ext.get('myTable').on('click', function(e, t){
        // t = target = cell
        var code = t.input.value;
        var description ='description');
        t.editor.startEdit(t, code + ' - ' + description);  // this depends on the template used for the ComboBox
    }, null, {delegate: 'td'});
    Fernando G

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts