EXTJS - Cara menargetkan input kotak centang yang diberikan di kisi

Saya memiliki kisi EXT yang memiliki kotak centang dan radio tambahan di 2 kolom terakhir menggunakan penyaji. Ketika saya memeriksa item di kisi dan melihat sumbernya, saya tidak melihat sebutan yang dicentang: dicentang di HTML jadi saya kesulitan menargetkan elemen tersebut.

Ketika sebuah baris dipilih, saya ingin dapat memeriksa apakah kotak centang dicentang, saya melakukan sesuatu seperti ini:

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

Apakah ada cara lain agar saya dapat menargetkan elemen ini untuk melihat apakah sudah dicentang?

Berikut kode lengkapnya:

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')
    });
});

MODEL SELEKSI YANG DIPERBARUI:

// 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 sumber
comment
Kolom centang tidak akan menampilkan contoh kotak centang yang sebenarnya seperti yang Anda duga. Itu hanya merender gambar dengan pendengar klik yang diterapkan. Jika Anda ingin mengetahui apa yang dipilih saya sarankan Anda menggunakan model pemilihan yang sesuai. Anda kemudian dapat dengan mudah mendapatkan semua informasi dengan cara itu.   -  person sra    schedule 25.07.2013
comment
Bagaimana cara saya mengubah model pemilihan untuk juga merender kotak centang dan radio di 2 kolom terakhir? Saya telah memeriksa semua contoh situs EXT tetapi tidak dapat menemukan jawaban atau contoh yang jelas?   -  person xXPhenom22Xx    schedule 25.07.2013
comment
Jika Anda benar-benar memiliki beberapa elemen masukan yang disimulasikan (saya hanya melihat kolom kotak centang) di kisi Anda, gunakan beforecellclick peristiwa kisi yang memungkinkan Anda mengidentifikasi sel mana, yang diklik dan secara langsung memungkinkan Anda mengubah catatan....   -  person sra    schedule 25.07.2013
comment
Mengapa Anda tidak menggunakan CheckColumn biasa? Itu akan menyelamatkan Anda dari semua masalah itu...   -  person rixo    schedule 25.07.2013
comment
@rixo itu tebakan pertama saya tetapi itu tidak berhasil untuk radio...   -  person sra    schedule 25.07.2013
comment
@sra Ini bisa berhasil: fiddle.sencha.com/#fiddle/32   -  person rixo    schedule 25.07.2013
comment
@rixo bagus seperti biasa ;) Dan ya, saya melewatkan kopi pertama saya.. Saya memikirkan model pemilihan kotak centang setelah membaca komentar Anda, jadi jawaban saya salah... Jadi ya, ini adalah solusi termudah dan terbersih ! Anda harus mempostingnya sebagai jawaban karena ini juga akan berfungsi dengan beberapa kolom jenis itu.   -  person sra    schedule 25.07.2013


Jawaban (3)


Mari kita coba pendekatan yang berbeda. Bagaimana jika Anda mengatur kolom centang untuk melakukan sesuatu seperti ini:

{
    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>';
    }
},

Ini harus menetapkan nilai langsung ke dalam catatan.

person kevhender    schedule 24.07.2013
comment
TypeError Tidak Tertangkap: Tidak dapat membaca properti 'dom' dari null buildLibraryGrid.js:41 TypeError Tidak Tertangkap: Objek -1 tidak memiliki metode 'set' [VM] baru (7607):1 onclick - person xXPhenom22Xx; 24.07.2013
comment
Apakah ID Anda bukan ints? Beri tanda kutip di sekitar parameter itu jika demikian: 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
id adalah INT. Mencoba cuplikan yang baru saja Anda kirim tetapi kembali dengan kesalahan yang sama. - person xXPhenom22Xx; 24.07.2013
comment
Untuk kesalahan: TypeError Tidak Tertangkap: Tidak dapat membaca properti 'dom' dari null, ia menunjuk ke myVar = !Ext.fly(isFull- + data.indexOf(record)).dom.checked; - person xXPhenom22Xx; 24.07.2013
comment
Bah, kesalahanku. Perlu mengelilingi findExact dengan 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
TypeError Tidak Tertangkap: Tidak dapat membaca properti 'dom' dari null .... Memperbarui kode saya di atas. Perilakunya juga sedikit berubah, sekarang ketika saya mencoba mengklik suatu item Anda mendapatkan segitiga merah di kiri atas kemudian jika saya mengklik untuk kedua kalinya itu akan memilih kotak - person xXPhenom22Xx; 24.07.2013
comment
Mengapa Anda masih mencoba menyetel myVar seperti itu? Nilainya seharusnya sudah ditetapkan pada saat itu, Anda cukup menggunakan record.get('isFull'). - person kevhender; 24.07.2013
comment
Anda kehilangan saya dalam hal itu, poin kode mana yang Anda bicarakan, ketika saya menghapus myVar menjadi null atau mengaturnya dengan bit !Ext.fly? - person xXPhenom22Xx; 25.07.2013
comment
Bagian Ext.fly seharusnya tidak lagi diperlukan, karena kode kotak centang menetapkan nilai secara langsung pada catatan. Anda seharusnya dapat menggunakan baris myVar = record.get('isFull') alih-alih baris Ext.fly(...). - person kevhender; 25.07.2013
comment
Ahh oke saya melewatkannya, melakukan perubahan dan tampaknya berhasil! Sekali lagi terima kasih atas semua bantuan Anda! - person xXPhenom22Xx; 25.07.2013
comment
Apakah cukup mudah untuk melakukan hal berikut: Jika kotak centang ID utama di sebelah kiri tidak dicentang untuk secara otomatis menghapus centang pada kotak radio dan kotak kedua? Maaf tentang semua pertanyaan noob, orang backend Python di sini jadi tidak berpengalaman dalam cara-cara liar JS. - person xXPhenom22Xx; 25.07.2013
comment
Anda dapat menambahkan ID kembali ke cek/radio, lalu setel Ext.fly(checkboxId).dom.checked = true/false pada elemen tersebut sesuai kebutuhan. - person kevhender; 25.07.2013
comment
Saya memperbarui model pilihan saya di atas. Jika ada pilihan kosong, ia akan pergi dan mendapatkan catatan yang terakhir dipilih dan saya dapat dengan andal mengambil ID terakhir yang tidak dicentang. Namun saya mendapatkan pesan kesalahan saat mencoba menghapus radio atau kotak centang. -- TypeError Tidak Tertangkap: Tidak dapat membaca properti 'dom' dari null - person xXPhenom22Xx; 25.07.2013

Data dalam catatan diakses menggunakan fungsi get(), bukan notasi objek:

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

Beberapa poin lainnya... Anda memeriksa nilai kebenaran menggunakan == true, yang akan mengembalikan nilai true untuk "kebenaran" apa pun. Anda sebaiknya menggunakan === jika Anda ingin memeriksa apakah nilainya sama dengan true.

Selain itu, Anda mungkin ingin mempertimbangkan Ext.fly() untuk mendapatkan elemen Anda, ini lebih ramah lingkungan:

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

Untuk mempermudah, Anda bahkan dapat melakukan ini:

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

EDIT:

Saya mendapat kesan bahwa Anda memiliki index sebagai salah satu bidang toko Anda, tetapi saya baru menyadari bahwa ternyata tidak. Anda ingin menggunakan store.indexOf(record) untuk mendapatkan indeks yang Anda perlukan:

var myVar = Ext.fly("isFull-" + data.indexOf(record)).dom.checked;
person kevhender    schedule 24.07.2013
comment
Saya mendapatkan kesalahan berikut ketika saya mencoba menerapkan salah satu dari ini -- TypeError Tidak Tertangkap: Tidak dapat membaca properti 'dom' dari null - person xXPhenom22Xx; 24.07.2013
comment
Saya salah ketik dalam tanggapan saya - Anda tidak boleh menggunakan # saat menggunakan getElementById atau Ext.fly(). Coba lagi tanpa #. - person kevhender; 24.07.2013
comment
Tidak masalah, ketika saya mencentang salah satu kotak, acaranya aktif tetapi saya masih kembali -- Uncaught TypeError: Cannot read property 'dom' of null. Ketika saya melihat sumbernya di Firebug saya TIDAK melihat 'dicentang: dicentang' atau semacamnya - person xXPhenom22Xx; 24.07.2013
comment
Apakah id pada kotak centang yang Anda lihat di firebug cocok dengan "isFull-"+record.get('index') yang Anda periksa? Kesalahan itu sepertinya menunjukkan bahwa sebenarnya tidak demikian. Periksa id di pembakar dan lakukan console.log("isFull-"+record.get('index')) di fungsi Anda untuk melihat apakah ID cocok. - person kevhender; 24.07.2013
comment
Sebenarnya, saya baru saja melihat bahwa Anda tidak memiliki properti indeks di catatan Anda. Anda ingin menggunakan store.indexOf(record). Saya akan memperbarui jawabannya. - person kevhender; 24.07.2013
comment
Oke, saya pikir kita sudah dekat, sekarang ketika saya mencentang kotak saya melihat False terlebih dahulu, lalu jika saya menghapus centangnya saya kembali benar... var myVar = Ext.fly(isFull- + data.indexOf(record)).dom. diperiksa; konsol.log(Varsaya); - person xXPhenom22Xx; 24.07.2013
comment
mari kita melanjutkan diskusi ini di chat - person xXPhenom22Xx; 24.07.2013
comment
Saya diblokir dari ngobrol, tapi selectionchange mungkin dipecat sebelum kotak dicentang, jadi hilangkan saja nilai yang dicentang dan Anda sebaiknya melanjutkan: var myVar = !Ext.fly("isFull-" + data.indexOf(record)).dom.checked; - person kevhender; 24.07.2013
comment
Itu bekerja dengan sangat baik! Sekali lagi terima kasih atas bantuan Anda dalam hal ini... Untuk menargetkan radio, bisakah saya juga menggunakan .checked? - person xXPhenom22Xx; 24.07.2013
comment
Radio dan Checkbox sama-sama pakai checked ya. - person kevhender; 24.07.2013
comment
Sepertinya saya mungkin telah mengambil tindakan... Grid juga memiliki kolom kotak centang di paling kiri, ketika saya mengkliknya saya mendapatkan respons yang BENAR terhadap myVar yang sedang dicentang, kemudian jika saya mengklik kotak centang tersebut saya menargetkan myVar tetap BENAR maka jika saya menghapus centang pada kotak saya menargetkan myVar berubah menjadi FALSE. Lalu jika saya mengklik kotak centang yang saya targetkan sepertinya merespons secara akurat, sepertinya urutan pengaktifannya mungkin salah? - person xXPhenom22Xx; 24.07.2013

Mungkin, Anda bisa menggunakan satu pendengar pada tampilan grid:

Sencha api [4.2]: Pemroses di kisi/kolom

 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