Combobox не отображается в ExtJS Grid

Я использую ExtJS 4.2. Я использую приведенный ниже код для отображения поля со списком в сетке ExtJS. Это моя первая попытка использовать Combobox внутри Grid, и моя конечная цель — несколько уровней выше этого. Но я застрял на первом шаге, то есть добавить поле со списком и отобразить результат Json в полях со списком сетки. Ниже мой код:

Ext.onReady(function() {

    Ext.require([ 'Ext.data.*', 'Ext.grid.*' ]);


    // ************************** Define Data Models ************************ //

    Ext.define('SecureUser', {
        extend : 'Ext.data.Model',
        fields : [ 'id', 'username' ]
    });


    // ************************** Define Data Stores ************************ //

    //The Store contains the AjaxProxy as an inline configuration
    var userStore = Ext.create('Ext.data.Store', {
        autoLoad : true,
        model : 'SecureUser',
        proxy : {
            type : 'ajax',
            api: {
                read: 'secureUserSecureRole/listJSON',
            },
            reader : {
                type : 'json',
                successProperty: 'success',
                root : 'secureUsers',
                messageProperty: 'message'
            },
            writer : {
                type : 'json',
                encode: 'true',
                root: 'secureUsers'                 
            }
        }
    });


    //renderer needed to display correct field when not editing combo (see API)
    Ext.util.Format.comboRenderer = function(combo) {
        return function(value) {
            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',
        mode: 'remote',
        store: userStore,
        valueField: 'username',
        displayField: 'username'
    });

    // Grid-columns with meta-data from backend.
    var recipeColumns = [ {
        header : "ID",
        width : 40,
        sortable : true,
        dataIndex : 'id'
    },{
        header : 'User Name',
        width : 130,
        dataIndex : 'username',
        editor : combo,
        renderer: Ext.util.Format.comboRenderer(combo)
    }];

    // create youbrew.recipe.Grid instance (@see recipeGrid.js)
    var userGrid = Ext.create('Ext.grid.Panel', {
        renderTo : document.body,
        store: userStore,
        width : 200,
        height : 300,
        clicksToEdit : 'auto',
        columns : recipeColumns
    });
});

Мой объект JSON, возвращенный из бэкэнда: {"sucess":true,"secureUsers":[{"username":"admin","id":1},{"username":"super","id":2 },{"имя пользователя":"пользователь","id":3}]}

В результате получается просто таблица с двумя заголовками ID и именем пользователя, а также записи, перечисленные одна за другой. Но я не вижу никаких полей со списком для имени пользователя в каждой строке. Даже когда я нажимаю, они не превращаются в поля со списком (я где-то читал, что такое поведение). Кроме того, я не вижу ошибок времени выполнения в инструменте отладчика.

Без комбинации

Можете ли вы сказать мне, где я ошибаюсь? Это потому, что я использую один и тот же пользовательский магазин как для сетки, так и для комбо?


person rajugaadu    schedule 09.06.2013    source источник
comment
Иметь скрипку было бы проще для нас   -  person Ye Liu    schedule 10.06.2013
comment
Я не видел, чтобы у вас в сетке был плагин CellEditing, может быть, поэтому   -  person Ye Liu    schedule 10.06.2013
comment
Привет, Жо. Спасибо за предложение, но я не видел такой необходимости, когда ссылался здесь: all-docs.info/extjs4/docs/api/Ext.form.ComboBox.html.   -  person rajugaadu    schedule 10.06.2013
comment
Я собираюсь попробовать добавить плагин CellEditing/RowEditing в сетку и сообщить вам результат. Я только что отредактировал свой вопрос на случай, если это даст лучшее представление о моей проблеме.   -  person rajugaadu    schedule 10.06.2013
comment
О, это была уловка Жо!!! Спасибо дружище. Вы заставили это работать :) Самая быстрая «работающая» помощь среди всех до сих пор по ExtJS! Больше на вашем пути, поскольку я собираюсь иметь дело с этими Comboboxes и Grids для редактирования и запуска событий сейчас. Я так хочу, чтобы у меня был способ связаться с вами напрямую, если я увижу какие-либо проблемы с моими испытаниями! Думаю, упоминание @jaux работает :)   -  person rajugaadu    schedule 10.06.2013
comment
Здорово! Я собираюсь создать ответ, чтобы другие люди могли его легко увидеть.   -  person Ye Liu    schedule 10.06.2013


Ответы (2)


Вам нужно добавить плагин CellEditing в конфигурацию сетки:

var userGrid = Ext.create('Ext.grid.Panel', {
    renderTo : document.body,
    store: userStore,
    width : 200,
    height : 300,
    columns : recipeColumns,
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ]
});
person Ye Liu    schedule 09.06.2013

(испанский) A mi me funciono, de la siguiente forma:

Ext.onReady(function() {

    Ext.require([ 'Ext.data.*', 'Ext.grid.*' ]);


    // ************************** Define Data Models ************************ //

    Ext.define('SecureUser', {
        extend : 'Ext.data.Model',
        fields : [ 'id', 'username' ]
    });


    // ************************** Define Data Stores ************************ //

    //The Store contains the AjaxProxy as an inline configuration
    var userStore = Ext.create('Ext.data.Store', {
        autoLoad : true,
        model : 'SecureUser',
        proxy : {
            type : 'ajax',
            api: {
                read: 'secureUserSecureRole/listJSON',
            },
            reader : {
                type : 'json',
                successProperty: 'success',
                root : 'secureUsers',
                messageProperty: 'message'
            },
            writer : {
                type : 'json',
                encode: 'true',
                root: 'secureUsers'                 
            }
        }
    });

    var combo = new Ext.form.ComboBox({
        typeAhead: true,
        triggerAction: 'all',
        mode: 'remote',
        store: userStore,
        valueField: 'username',
        displayField: 'username'
    });

    var comboRenderer = function(value, p, record) {
        var record = combo.findRecord(combo.valueField, value);
        return record ? record.get(combo.displayField) : value;
    }

    // Grid-columns with meta-data from backend.
    var recipeColumns = [ {
        header : "ID",
        width : 40,
        sortable : true,
        dataIndex : 'id'
    },{
        header : 'User Name',
        width : 130,
        dataIndex : 'username',
        editor : combo,
        renderer: comboRenderer
    }];

    // create youbrew.recipe.Grid instance (@see recipeGrid.js)
    var userGrid = Ext.create('Ext.grid.Panel', {
        renderTo : document.body,
        store: userStore,
        width : 200,
        height : 300,
        clicksToEdit : 'auto',
        columns : recipeColumns,
        plugins: [Ext.create('Ext.grid.plugin.CellEditing')]
    });
});
person Luis Castrillo    schedule 25.11.2013
comment
Какой у Вас вопрос? На английском? - person Johan Karlsson; 25.11.2013