Simple Checkbox ListView Using DataView In ExtJS

September 20th, 2010 by aditia rahman / 7 Comments  

     

In this post I want to share how to create listview using dataview in ExtJS, although there is available listview example on the official site, somewhat maybe you to make the different listview, I get the idea when my friend Erwin Draft asking me how to do this, thanks for the idea.

Here the backend PHP code, I called get-data.php

<?php

$data = array();

for ($i = 1; $i <= 10; $i++) {
    $data[] = array(
        'id' => $i,
        'message' => 'Raw data number ' . $i
    );
}

$o = array('data' => $data);

echo json_encode($o);

?>

The backend PHP is to getting server data, I just declaring simple data, you can change it whatever you like.

ExtJS Javascript code is inside the html file, my file named index.html

<script type="text/javascript">

function oncheck(str) {
    if (Ext.fly('box' + str).hasClass('checked')) {
        Ext.fly('box' + str).removeClass('checked');
        document.getElementById('check'+str).checked = false;
    } else {
        Ext.fly('box' + str).addClass('checked');
        document.getElementById('check'+str).checked = true;
    }
}

Ext.onReady(function(){
    var proxyData = new Ext.data.HttpProxy({
        url: 'get-data.php'
    });

    var strData = new Ext.data.JsonStore({
        proxy: proxyData,
        root: 'data',
        fields: [
            'id', 'message'
        ]
    });

    var tplData = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="databox" id="box{id}" onclick="oncheck({id})">',
            '<input type="checkbox" id="check{id}" value="c{id}"> ',
            '&nbsp;{message}</div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    );

    var dataV = new Ext.DataView({
        autoScroll: true, store: strData, tpl: tplData,
        autoHeight: false, height: 265,
        multiSelect: true, itemSelector: 'div.thumb-wrap',
        emptyText: 'No data to display',
        loadingText: 'Please Wait...',
        style: 'border:1px solid #99BBE8;background:#fff;'
    });

    function checkvalue() {
        var obj = Ext.select('input[type=checkbox]').elements;
        var i = 0;
        var cb = '';
        var total = 0;
        for (i=0; i<obj.length; i++) {
            if (obj[i].checked) {
               cb = cb + ' ' + obj[i].value;
               total++;
            }
        }
        Ext.MessageBox.alert('Checked', 'You clicked ' + total + ' checkbox, they value are ' + cb);
    }

    var panel = new Ext.Panel({
        title: 'List Data View', frame: true, width: 400,
        height: 340, id: 'panelBottom', style: 'margin: 0 auto;',
        renderTo: 'bottom', items: [dataV],
        buttons: [{
            text: 'Get Checked',
            handler: checkvalue
        }]
    });

    strData.load();
});
</script>

As you can see on the code above the script is to showing dataview inside panel component, dataview render the template declaration that defined in XTemplate component, every rendered data have its own unique id, see code below (a part of ExtJS code above)

var tplData = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="databox" id="box{id}" onclick="oncheck({id})">',
        '<input type="checkbox" id="check{id}" value="c{id}"> ',
        '&nbsp;{message}</div>',
    '</tpl>',
    '<div class="x-clear"></div>'
);

Every time the users click on the div (which have css class “databox”) the checkbox will be checked or unchecked and the div style changing, I’m using the Ext.fly function inside oncheck(str) function to do this, the oncheck(str) function must be placed outside the Ext.onReady(function()) otherwise it will not work, I still don’t know why this is happen.

And the last is to get checked value, I achieve this by putting handler inside a button, this is another part of the ExtJS code above

function checkvalue() {
    var obj = Ext.select('input[type=checkbox]').elements;
    var i = 0;
    var cb = '';
    var total = 0;
    for (i=0; i<obj.length; i++) {
        if (obj[i].checked) {
           cb = cb + ' ' + obj[i].value;
           total++;
        }
    }
    Ext.MessageBox.alert('Checked', 'You clicked ' + total + ' checkbox, they value are ' + cb);
}

What I do this is selecting all the checkbox elements in HTML an looping through all the detected checbox and getting the value to showed is ExtJS MessageBox. Yup that all, as usual you can see the example screenshot below, download all the code and see the online example.

View Demo | Download Source

        submit to reddit Delicious

7 Comments Leave a Comment Subscribe RSS

  • thank you very much that help me well
    i used it let users chose there favorite fields in a dataGrid

    very nice

  • sam says:

    Just want to say Thankyou, this article helped me overcome my 5 days old problem.

  • Leonardo says:

    Hi,

    I implemented successfully your UI, but for some reasons, when I click on the checkbox, it doesn’t change checked/unchecked state.
    Everything it’s working if I click on the row, instead of the checkbox.

    Any idea?
    Thanks!

  • yoni says:

    Thx, i found this helpful

  • yobo says:

    Update for ExtJS 4.0.2 (function oncheck and var strData) :

    function oncheck(str) {
    if (Ext.get(‘box’ + str).hasCls(‘checked’)) {
    Ext.get(‘box’ + str).removeCls(‘checked’);
    Ext.get(‘check’ + str).dom.checked = false;
    } else {
    Ext.get(‘box’ + str).addCls(‘checked’);
    Ext.get(‘check’ + str).dom.checked = true;
    }
    }

    var strData = new Ext.data.JsonStore({
    // store configs
    autoDestroy: true,
    storeId: ‘strData’,
    proxy: {
    type: ‘ajax’,
    url: ‘get-data.php’,
    reader: {
    type: ‘json’,
    root: ‘data’,
    idProperty: ‘id’
    }
    },
    fields: ['id', 'message']
    });

    That’s all Folk !!!

    Thx, Yobo!

  • Samir says:

    i want to use radiogroup for online exam having q.no question ans1 ans2 ans3 ans4 with radio button

Leave a Comment