EXTJS - Как настроить визуализированный ввод флажка в сетке

У меня есть сетка EXT, в которой есть дополнительный флажок и радио в последних двух столбцах с использованием средства визуализации. Когда я проверяю элемент в сетке и просматриваю источник, я не вижу обозначение checked:checked в HTML, поэтому мне трудно ориентироваться на элемент.

Когда выбрана строка, я хочу проверить, установлен ли флажок, я делаю что-то вроде этого:

if (document.getElementById("#isFull-"+record['index']+"").checked == true){
    var myVar = true;
}

Есть ли другой способ настроить таргетинг на этот элемент, чтобы проверить, отмечен ли он?

Вот полный код:

Ext.onReady(function () {

    Ext.QuickTips.init();

    // Data store
    var data = Ext.create('Ext.data.JsonStore', {
        autoLoad: true,
        fields: ['name', 'market', 'expertise', 'id', 'isFull', 'isPrimary'],
        proxy: {
            type: 'ajax',
            url: '/opsLibrary/getLibraryJson'
        }
    });

    // Selection model
    var selModel = Ext.create('Ext.selection.CheckboxModel', {
        columns: [{
            xtype: 'checkcolumn',
            text: 'Active',
            dataIndex: 'id'
        }],
        listeners: {
            selectionchange: function (value, meta, record, rowIndex, colIndex) {
                var selectedRecords = grid4.getSelectionModel().getSelection();
                var selectedParams = [];

                // Clear hidden input
                $('#selected-libraries').empty();
                var record = null;
                var myVar = null;
                var myVar2 = null;

                for (var i = 0, len = selectedRecords.length; i < len; i++) {
                    record = selectedRecords[i];

                    // Is full library checked?
                    myVar = !Ext.fly("isFull-" + data.indexOf(record)).dom.checked;

                    // Build data object
                    selectedParams.push({
                        id: record.getId(),
                        full: myVar

                    });
                }
                // JSON encode object and set hidden input
                $('#selected-libraries').val(JSON.stringify(selectedParams));

            }
        }
    });

    // Render library grid
    var grid4 = Ext.create('Ext.grid.Panel', {
        xtype: 'gridpanel',
        id: 'button-grid',
        store: data,
        columns: [{
            text: "Library",
            width: 170,
            sortable: true,
            dataIndex: 'name'
        }, {
            text: "Market",
            width: 125,
            sortable: true,
            dataIndex: 'market'
        }, {
            text: "Expertise",
            width: 125,
            sortable: true,
            dataIndex: 'expertise'
        }, {
            text: 'Full',
            dataIndex: 'isFull',
            width: 72,
            renderer: function (value, meta, record, rowIndex, colIndex) {
                return '<center><input type="checkbox" onclick="var s = Ext.getCmp(\'button-grid\').store; s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\')).set(\'isFull\', this.value)"'
            }
        }, {
            text: 'Primary',
            dataIndex: 'isPrimary',
            width: 72,
            renderer: function (value, meta, record, rowIndex, colIndex) {
                return '<center><input type="radio" id="isPrimary-' + rowIndex + '"/></center>';
            }
        }, ],
        columnLines: false,
        selModel: selModel,
        width: 600,
        height: 300,
        frame: true,
        title: 'Available Libraries',
        iconCls: 'icon-grid',
        renderTo: Ext.get('library-grid')
    });
});

ОБНОВЛЕННАЯ МОДЕЛЬ ВЫБОРА:

// Selection model
var selModel = Ext.create('Ext.selection.CheckboxModel', {
    columns: [{
        xtype: 'checkcolumn',
        text: 'Active',
        dataIndex: 'id'
    }],
    listeners: {
        selectionchange: function (value, meta, record, rowIndex, colIndex) {
            var selectedRecords = grid4.getSelectionModel().getSelection();
            var LastSelectedRecords = grid4.getSelectionModel().getLastSelected();
            var selectedParams = [];

            // If user unselected ID then make sure Full & Primary boxes cleared
            if (grid4.getSelectionModel().getSelection() == "") {
                // Get row ID
                Ext.fly('isFull-' + LastSelectedRecords['index']).dom.checked = false;
                Ext.fly('isPrimary-' + LastSelectedRecords['index']).dom.checked = false;
            }

            // Clear input and reset vars
            $('#selected-libraries').empty();
            var record = null;
            var myVar = null;
            var myVar2 = null;

            // Loop through selected records
            for (var i = 0, len = selectedRecords.length; i < len; i++) {
                record = selectedRecords[i];

                // Is full library checked?
                myVar = record.get('isFull');

                // Is this primary library?
                myVar2 = record.get('isPrimary');

                // Build data object
                selectedParams.push({
                    id: record.getId(),
                    full: myVar,
                    primary: myVar2
                });
            }
            // JSON encode object and set hidden input
            $('#selected-libraries').val(JSON.stringify(selectedParams));
            console.log(JSON.stringify(selectedParams));
        }
    }
});

person xXPhenom22Xx    schedule 24.07.2013    source источник
comment
Checkcolumn не будет отображать истинные экземпляры флажков, как вы можете догадаться. Он просто отображает изображения с применением прослушивателя кликов. Если вам нужно знать, что выбрано, я рекомендую вам использовать соответствующую модель выбора. Таким образом, вы можете легко получить всю информацию.   -  person sra    schedule 25.07.2013
comment
Как мне изменить модель выбора, чтобы также отобразить флажок и радио в последних двух столбцах? Я просмотрел все примеры сайтов EXT, но не смог найти четкого ответа или примера?   -  person xXPhenom22Xx    schedule 25.07.2013
comment
Если у вас действительно есть несколько смоделированных элементов ввода (я видел только столбец с флажком) в вашей сетке, используйте beforecellclick событие сетки, которое позволит вам определить, какая ячейка была нажата, и напрямую позволит вам изменить запись....   -  person sra    schedule 25.07.2013
comment
Почему бы вам не использовать обычный CheckColumn? Это избавит вас от всех проблем...   -  person rixo    schedule 25.07.2013
comment
@rixo, это было мое первое предположение, но это не сработает для радио...   -  person sra    schedule 25.07.2013
comment
@sra Это может сработать: fiddle.sencha.com/#fiddle/32   -  person rixo    schedule 25.07.2013
comment
@rixo, как всегда, хороший ;) И да, я пропустил свой первый кофе.. Я подумал о модели выбора флажка после прочтения вашего комментария, поэтому мой ответ был неправильным... Так что да, это самое простое и чистое решение ! вы должны опубликовать его как ответ, потому что это также будет работать с несколькими t´column этого типа.   -  person sra    schedule 25.07.2013


Ответы (3)


Давайте попробуем другой подход. Что, если вы установите свои контрольные столбцы, чтобы сделать что-то вроде этого:

{
    text: 'Full',
    dataIndex:'isFull',
    width: 70,
    renderer: function (value, meta, record, rowIndex, colIndex) {
        return '<center><input type="checkbox" onclick="var s = Ext.getCmp(\'button-grid\').store; s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\')).set(\'isFull\', this.value)" /></center>';
    }
},

Это должно установить значение непосредственно в запись.

person kevhender    schedule 24.07.2013
comment
Uncaught TypeError: невозможно прочитать свойство dom нулевого buildLibraryGrid.js: 41 Uncaught TypeError: объект -1 не имеет метода set [VM] new (7607): 1 onclick - person xXPhenom22Xx; 24.07.2013
comment
Ваш ID не int? Поместите этот параметр в кавычки, если это так: return '<center><input type="checkbox" onclick="Ext.getCmp(\'button-grid\').store.findExact(\'id\',\'' + record.get('id') + '\').set(\'isFull\', this.value)" /></center>'; - person kevhender; 24.07.2013
comment
идентификатор является INT. Попробовал фрагмент, который вы только что отправили, но вернулся с той же ошибкой. - person xXPhenom22Xx; 24.07.2013
comment
Для ошибки: Uncaught TypeError: Невозможно прочитать свойство 'dom' из null, оно указывает на myVar = !Ext.fly(isFull- + data.indexOf(record)).dom.checked; - person xXPhenom22Xx; 24.07.2013
comment
Ба, моя ошибка. Нужно окружить findExact getAt: onclick="var s = Ext.getCmp(\'button-grid\').store; s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\')).set(\'isFull\', this.value)" - person kevhender; 24.07.2013
comment
Uncaught TypeError: Невозможно прочитать свойство 'dom' из null .... Обновлен мой код выше. Также поведение немного изменилось, теперь, когда я пытаюсь щелкнуть элемент, вы получаете этот красный треугольник в левом верхнем углу, а если я щелкну второй раз, он выберет поле - person xXPhenom22Xx; 24.07.2013
comment
Почему вы все еще пытаетесь установить myVar таким образом? В этот момент значение уже должно быть установлено, вы можете просто использовать record.get('isFull'). - person kevhender; 24.07.2013
comment
Вы потеряли меня из-за этого, о каком пункте кода вы говорите, когда я очищаю myVar до нуля или устанавливаю его с помощью бита !Ext.fly? - person xXPhenom22Xx; 25.07.2013
comment
Часть Ext.fly больше не нужна, так как код флажка устанавливает значение непосредственно в записи. Вы должны иметь возможность использовать myVar = record.get('isFull') вместо строки Ext.fly(...). - person kevhender; 25.07.2013
comment
Ах, хорошо, я пропустил это, внес изменения, и, похоже, они работают! Еще раз спасибо за вашу помощь! - person xXPhenom22Xx; 25.07.2013
comment
Было бы довольно легко сделать следующее: если флажок основного идентификатора слева не отмечен, чтобы автоматически снять флажок как для радио, так и для второго? Извините за все нубские вопросы, здесь парень с бэкэндом на Python, так что он не разбирается в диких способах JS. - person xXPhenom22Xx; 25.07.2013
comment
Вы можете добавить идентификатор обратно в чек/радио, а затем просто установить Ext.fly(checkboxId).dom.checked = true/false для этих элементов по мере необходимости. - person kevhender; 25.07.2013
comment
Я обновил свою модель выбора выше. Если есть пустой выбор, он идет и получает последнюю выбранную запись, и я могу надежно получить последний идентификатор, который не был проверен. Но я получаю сообщение об ошибке при попытке отключить радио или флажок. -- Uncaught TypeError: Не удается прочитать свойство 'dom' из null - person xXPhenom22Xx; 25.07.2013

Доступ к данным в записях осуществляется с помощью функции get(), а не нотации объекта:

if (document.getElementById("isFull-"+record.get('index')).checked == true)
{
    var myVar = true;
}

Еще пара моментов... Вы проверяете значение истинности, используя == true, которое вернет true для любой "истины". Вы захотите использовать ===, если хотите проверить, что оно равно true.

Кроме того, вы можете рассмотреть Ext.fly(), чтобы получить свой элемент, это более удобно для Ext:

if (Ext.fly("isFull-"+record.get('index')).dom.checked === true)
{
    var myVar = true;
}

Для простоты можно даже просто сделать так:

var myVar = Ext.fly("isFull-"+record.get('index')).dom.checked;

ИЗМЕНИТЬ:

У меня сложилось впечатление, что у вас есть index в качестве одного из полей вашего магазина, но я только что заметил, что это не так. Вы захотите использовать store.indexOf(record), чтобы получить нужный вам индекс:

var myVar = Ext.fly("isFull-" + data.indexOf(record)).dom.checked;
person kevhender    schedule 24.07.2013
comment
Я получаю следующую ошибку, когда пытаюсь реализовать любой из них: Uncaught TypeError: Cannot read property 'dom' of null - person xXPhenom22Xx; 24.07.2013
comment
В моем ответе была опечатка - вы не должны использовать # при использовании getElementById или Ext.fly(). Попробуйте еще раз без #. - person kevhender; 24.07.2013
comment
Нет кости, когда я устанавливаю один из флажков, событие запускается, но все еще возвращается -- Uncaught TypeError: Cannot read property 'dom' of null. Когда я просматриваю исходный код в Firebug, я НЕ вижу «проверено: проверено» или что-то в этом роде. - person xXPhenom22Xx; 24.07.2013
comment
Соответствует ли id флажка, который вы видите в firebug, "isFull-"+record.get('index'), который вы проверяете? Эта ошибка, кажется, предполагает, что это не так. Проверьте id в firebug и выполните console.log("isFull-"+record.get('index')) в своей функции, чтобы увидеть, совпадают ли идентификаторы. - person kevhender; 24.07.2013
comment
На самом деле, я только сейчас вижу, что в вашей записи нет свойства index. Вы захотите использовать store.indexOf(record). Я обновлю ответ. - person kevhender; 24.07.2013
comment
Хорошо, я думаю, что мы близки, теперь, когда я устанавливаю флажок, я сначала вижу False, затем, если я сниму его, я возвращаю true... var myVar = Ext.fly(isFull- + data.indexOf(record)).dom. проверено; console.log(моя переменная); - person xXPhenom22Xx; 24.07.2013
comment
давайте продолжим это обсуждение в чате - person xXPhenom22Xx; 24.07.2013
comment
Я заблокирован в чате, но selectionchange, вероятно, будет уволен до того, как флажок будет установлен, поэтому просто отмените проверенное значение, и все будет готово: var myVar = !Ext.fly("isFull-" + data.indexOf(record)).dom.checked; - person kevhender; 24.07.2013
comment
Это сработало как шарм! Еще раз спасибо за вашу помощь в этом... Могу ли я использовать .checked для нацеливания на радио? - person xXPhenom22Xx; 24.07.2013
comment
Radio и Checkbox используют checked, да. - person kevhender; 24.07.2013
comment
Думаю, я, возможно, поторопился ... В сетке также есть столбец флажков в крайнем левом углу, когда я нажимаю, я получаю ИСТИННЫЙ ответ на проверяемый myVar, затем, если я щелкаю флажок, я нацеливаюсь на myVar остается ИСТИНА, тогда, если я сниму флажок, моя переменная изменится на ЛОЖЬ. Затем, если я нажму на свой целевой флажок, он, кажется, отреагирует точно, определенно кажется, что порядок, в котором он срабатывает, может быть неправильным? - person xXPhenom22Xx; 24.07.2013

Возможно, вы можете использовать один слушатель в виде сетки:

Sencha API [4.2]: Слушатели в сетке/столбцах

 listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ 
                 console.log('click el'); 
            }
        },
person mfruizs2    schedule 24.07.2013