Question

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.panel.*'
]);
Ext.onReady(function(){
    Ext.define('ImageModel', {
        extend: 'Ext.data.Model',
        fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
    });
    var store = Ext.create('Ext.data.JsonStore', {
        model: 'ImageModel',
        proxy: {
            type: 'ajax',
            url: 'get-images.php',
            reader: {
                type: 'json',
                root: 'images'
            }
        }
    });
    store.load();

    var listView = Ext.create('Ext.grid.Panel', {
        width:425,
        height:250,
        collapsible:true,
        title:'Simple ListView <i>(0 items selected)</i>',
        renderTo: Ext.getBody(),

        store: store,
        multiSelect: true,
        viewConfig: {
            emptyText: 'No images to display'
        },

        columns: [{
            text: 'File',
            flex: 50,
            dataIndex: 'name'
        },{
            text: 'Last Modified',
            xtype: 'datecolumn',
            format: 'm-d h:i a',
            flex: 35,
            dataIndex: 'lastmod'
        },{
            text: 'Size',
            dataIndex: 'size',
            tpl: '{size:fileSize}',
            align: 'right',
            flex: 15,
            cls: 'listview-filesize'
        }]
    });

    // little bit of feedback
    listView.on('selectionchange', function(view, nodes){
        var l = nodes.length;
        var s = l != 1 ? 's' : '';
        listView.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');
    });
});

i have create 2 panel, one is left panel,second is right panel.
the list view are created in the left panel,and the right panel will read the page showimage.php
list view are display file detail,when user select the list view will passing the file name as a parameter “name” to showimage.php, and the right panel will show the image by name are passed from list view select event.(actually the name field are stored file’s ID)

Question

1)how to create the select list view event,when select a list view passing parameter name to showimage.php,and right panel refresh the page and display the image.

Answer 1

//===========================LIST VIEW===============================
    Ext.define('ImageModel', {
        extend: 'Ext.data.Model',
        fields: ['PicID', 'PicUploadedDateTime','PicData']
    });

    var ImgStore = Ext.create('Ext.data.JsonStore', {
        model: 'ImageModel',
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'get-image.php',
            baseParams: {  //here you can define params you want to be sent on each request from this store
                        mainid: 'value1',
                        startdate: 'value2',
                        enddate: 'value3'
                        },
            reader: {
                type: 'json',
                root: 'images'
            }
        }
    });

    var listView = Ext.create('Ext.grid.Panel', {
        region: 'west',
        id : 'imagelist',
        title: 'Select Image',
        width: 200,
        split: true,
        collapsible: true,
        floatable: false,
        title:'Select Image',
        store: ImgStore,
        multiSelect: false,
        viewConfig: {
            emptyText: 'No images to display'
        },

        columns: [
            {
            text: 'Date Time Uploaded',
            //xtype: 'datecolumn',
            //format: 'Y-m-d H:i:s',
            flex: 65,
            width: 100,
            dataIndex: 'PicUploadedDateTime'
        }]
    });

    function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
    }

    listView.on('selectionchange', function(view, nodes){
        /*
        var nodeIdDisplay = "";
        for(var i = 0; i < nodes.length; i++)
        {
            if(nodeIdDisplay.length > 0)
                nodeIdDisplay += ",";
            nodeIdDisplay += nodes[i].get("PicID");
        }
        */
        if (nodes[0].get("PicID") > 0){
            //alert(nodes[0].get("PicData"));
            image=Ext.getCmp('displayimage');
            image.setSrc("data:image/jpeg;base64,"+hexToBase64(nodes[0].get("PicData")));
        //console.log(nodes[0].get("PicData"));
        }
    });

this code method is post to the get-image.php,and get all the image in store and then,
list view on select change event get the image id and display the image on type : 'image' component