Отображение динамических компонентов в ExtJS 4 Столбец GridPanel с Ext.create

Ответ 1

Есть несколько способов, которыми я видел это. Поскольку столбец сетки не является контейнером Ext, он не может иметь компоненты Ext в качестве дочерних элементов как часть любой конфигурации, как это делают другие компоненты контейнера. Для добавления компонентов Ext к ячейкам требуется логика вывода сетки.

Это решение изменяет ваш собственный рендеринг столбцов, чтобы он помещал специальный класс css в обработанный тег TD. После того, как представление сетки будет готово, пройдены записи и пользовательский класс будет найден для соответствующих специальных столбцов. Ползунок отображается каждому найденному столбцу.

Нижеприведенный код представляет собой модифицированную версию примера сетки ext js, представленную в примерах Sencha. Модификация смешивается в настраиваемом визуализаторе столбцов и рендеринг слайдеров столбчатой ​​строки в элементы TD.

Этот пример включает только достаточную модификацию примера Sencha для демонстрации идей реализации. Ему не хватает разделенного представления и логики контроллера.

Это изменение: http://docs.sencha.com/ext-js/4-0/#!/example/grid/array-grid.html

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


Ext.onReady(function() {

    // sample static data for the store
    Ext.define('Company', {
        extend: 'Ext.data.Model',
        fields: ['name', 'price', 'change', 'pctChange', 'lastUpdated', 'type']
    }); 

    var myData = [
        ['3m Co',                               71.72, 2,  0.03,  '9/1/2011', 'integer'],
        ['Alcoa Inc',                           29.01, 4,  1.47,  '9/1/2011', 'string'],
        ['Altria Group Inc',                    83.81, 6,  0.34,  '9/1/2011', 'string'],
        ['American Express Company',            52.55, 8,  0.02,  '9/1/2011', 'string'],
        ['American International Group, Inc.',  64.13, 2,  0.49,  '9/1/2011', 'integer'],
        ['AT&T Inc.',                           31.61, 4, -1.54, '9/1/2011', 'integer'],
        ['Boeing Co.',                          75.43, 6,  0.71,  '9/1/2011', 'string'],
        ['Caterpillar Inc.',                    67.27, 8,  1.39,  '9/1/2011', 'integer'],
        ['Citigroup, Inc.',                     49.37, 1,  0.04,  '9/1/2011', 'integer'],
        ['E.I. du Pont de Nemours and Company', 40.48, 3,  1.28,  '9/1/2011', 'integer'],
        ['Exxon Mobil Corp',                    68.1,  0, -0.64, '9/1/2011', 'integer'],
        ['General Electric Company',            34.14, 7, -0.23, '9/1/2011', 'integer']
    ];

    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        model: 'Company',
        data: myData
    });

    // existing template
    stringTemplate = new Ext.XTemplate('code to render {name} for string items');

    // custom column renderer
    specialRender = function(value, metadata, record) {
        var data;

        data = Ext.apply({}, record.data, record.getAssociatedData());

        if (data.type == "string") {
            return stringTemplate.apply(data);;
        } else if (data.type == "double" || data.type == "integer") {
            // add a css selector to the td html class attribute we can use it after grid is ready to render the slider
            metadata.tdCls = metadata.tdCls + 'slider-target';
            return '';
        } else {
            return("Unknown data.type");

        }
    };

    // create the Grid
    grid = Ext.create('Ext.grid.Panel', {
        rowsWithSliders: {},
        store: store,
        stateful: true,
        stateId: 'stateGrid',
        columns: [
            {
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'name'
            },
            {
                text     : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                text     : 'Change',
                width    : 75,
                sortable : true,
                dataIndex: 'change',
                renderer: specialRender,
                width: 200
            },
            {
                text     : '% Change',
                width    : 75,
                sortable : true,
                dataIndex: 'pctChange'
            },
            {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastUpdated'
            }
        ],
        height: 350,
        width: 600,
        title: 'Irm Grid Example',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true
        }
    });

    /**
     * when the grid view is ready this method will find slider columns and render the slider to them
     */
    onGridViewReady = function() {
        var recordIdx,
            colVal,
            colEl;

        for (recordIdx = 0; recordIdx < grid.store.getCount(); recordIdx++ ) {
            record = grid.store.getAt(recordIdx);
            sliderHolder = Ext.DomQuery.select('.slider-target', grid.view.getNode(recordIdx)); 
            if (sliderHolder.length) {
                colEl = sliderHolder[0];

                // remove div generated by grid template - alternative is to use a new template in the col
                colEl.innerHTML = '';

                // get the value to be used in the slider from the record and column
                colVal = record.get('change');

                // render the slider - pass in the full record in case record data may be needed by change handlers
                renderNumericFilter(colEl, colVal, record)
            }
        }

    }

    // when the grids view is ready, render sliders to it
    grid.on('viewready', onGridViewReady, this);

    // modification of existing method but removed from custom column 
    renderNumericFilter = function(el, val, record) {

        var filterPanel = Ext.widget('slider', {
            width: 200,
            value: val,
            record: record,
            minValue: 0,
            maxValue: 10,
            renderTo: el
        });

    }

});

Ответ 2

Я сделал что-то подобное, когда мне нужно было отобразить небольшой график (по существу, искровой диаграммы) в столбце сетки. Это решение похоже на sha, но оно более надежное и делегирует рендеринг отображаемому компоненту, а не Column, который на самом деле не имеет цепочки рендеринга.

Сначала класс столбца:

Ext.define("MyApp.view.Column", {
    extend: "Ext.grid.column.Column",

    // ...

    renderer: function (value, p, record) {
        var container_id = Ext.id(),
            container = '<div id="' + container_id + '"></div>';

        Ext.create("MyApp.view.Chart", {
            type: "column",
            // ...
            delayedRenderTo: container_id
        });

        return container;
    }
});

Обратите внимание на параметр конфигурации delayedRenderTo. Точно так же, как renderTo, это будет идентификатор DOM элемента, который будет отображаться компонентом диаграммы, за исключением того, что он не должен присутствовать в DOM во время создания.

Тогда класс компонента:

Ext.define("MyApp.view.Chart", {
    extend: "Ext.chart.Chart",

    // ...

    initComponent: function () {
        if (this.delayedRenderTo) {
            this.delayRender();
        }

        this.callParent();
    },

    delayRender: function () {
        Ext.TaskManager.start({
            scope: this,
            interval: 100,
            run: function () {
                var container = Ext.fly(this.delayedRenderTo);

                if (container) {
                    this.render(container);
                    return false;
                } else {
                    return true;
                }
            }
        });
    }
});   

Итак, во время initComponent() мы проверяем задержку рендера и при необходимости приготовьте. В противном случае он отображается как обычно.

Сама функция delayRender() назначает задачу проверять каждый так часто (в этом случае 100 мс) для существования элемента с данным идентификатором - то есть для проверки того, был ли обработан столбец. Если нет, возвращает true, чтобы перенести задачу. Если это так, отображает компонент и возвращает false, чтобы отменить задачу.

Нам повезло с этим в этой области, поэтому я надеюсь, что это сработает и для вас.

Кстати, я разрабатывал это как часть ответа моего собственного вопроса о графике ExtJS. Этот поток имеет результаты моего тестирования производительности. Я составлял 168 компонентов диаграммы в столбцах сетки в 3-4 раза в большинстве браузеров и ОС. Я предполагаю, что ваши слайдеры будут делать намного быстрее, чем это.

Ответ 3

Попробуйте что-то вроде этого:

renderNumericFilter: function () {
    var id = Ext.id();
    Ext.defer(function () {
        Ext.widget('slider', {
            renderTo: id,
            width: 200,
            value: 50,
            increment: 10,
            minValue: 0,
            maxValue: 100,
        });
    }, 50);
    return Ext.String.format('<div id="{0}"></div>', id);
}

Но я должен сказать все, что вы пытаетесь сделать - это звучит не правильно:) Я не думаю, что куча слайдеров внутри сетки будет хорошо выглядеть для пользователя.