Dataview not working

**king1231986** · 23 Apr 2009 7:50 PM

Hi,
I want to know how to use data view in air.. But it seems not to work wat seems to the problem. any examples will be great help.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Welcome</title>
        <!-- AIR Config -->
        <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
        <script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>
        <!-- ExtJs Default Style -->
           <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
        <!-- ExtJs FrameWork -->
        <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="lib/ext/ext-all.js"></script>
        <script type="text/javascript" src="lib/ext/air/ext-air.js"></script>
        <!-- File -->
        <script type="text/javascript" src="js/ext_config.js"></script>
        <script type="text/javascript" src="js/data-view.js"></script>
    </head>
    <body>
        
    </body>
</html>

Code:

/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
    var xd = Ext.data;

    var store = new Ext.data.JsonStore({
        url: 'http://localhost/test/get-images.php',
        root: 'images',
        fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
    });
    store.load();

    var tpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb"><img src="{url}" title="{name}"></div>',
            '<span class="x-editable">{shortName}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    );

    var panel = new Ext.Panel({
        id:'images-view',
        frame:true,
        width:535,
        autoHeight:true,
        collapsible:true,
        layout:'fit',
        title:'Simple DataView (0 items selected)',

        items: new Ext.DataView({
            store: store,
            tpl: tpl,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',

            plugins: [
                new Ext.DataView.DragSelector(),
                new Ext.DataView.LabelEditor({dataIndex: 'name'})
            ],

            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                data.sizeString = Ext.util.Format.fileSize(data.size);
                data.dateString = data.lastmod.format("m/d/Y g:i a");
                return data;
            },
            
            listeners: {
                selectionchange: {
                    fn: function(dv,nodes){
                        var l = nodes.length;
                        var s = l != 1 ? 's' : '';
                        panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
                    }
                }
            }
        })
    });
    panel.render(document.body);

});

PHP Code:


<?php
$dir = "icons/";
$images = array();
$d = dir($dir);
while($name = $d->read()){
    if(!preg_match('/\.(jpg|gif|png)$/', $name)) continue;
    $size = filesize($dir.$name);
    $lastmod = filemtime($dir.$name)*1000;
    $images[] = array('name'=>$name, 'size'=>$size, 
            'lastmod'=>$lastmod, 'url'=>$dir.$name);
}
$d->close();
$o = array('images'=>$images);
echo json_encode($o);
?>

Thank you,

Regards,
Madan

**timothy** · 24 Apr 2009 12:11 AM

Hi!

Because XTemplates create dynamic functions which is a case of eval, AIR throws a security error because this is not allowed after it has finished loading your initial html page.

To get around this, simply pre-compile all your templates in the head of your page.

So where you have:

Code:

    var tpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb"><img src="{url}" title="{name}"></div>',
            '<span class="x-editable">{shortName}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    );

Simply put that into the head as something like:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Welcome</title>
        <!-- AIR Config -->
        <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
        <script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>
        <!-- ExtJs Default Style -->
           <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
        <!-- ExtJs FrameWork -->
        <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="lib/ext/ext-all.js"></script>
        <script type="text/javascript" src="lib/ext/air/ext-air.js"></script>
        <!-- File -->
        <script type="text/javascript" src="js/ext_config.js"></script>
        <script type="text/javascript">
        window.globalXTemplate=
		{
			dataView: new Ext.XTemplate(
		        '<tpl for=".">',
		            '<div class="thumb-wrap" id="{name}">',
		            '<div class="thumb"><img src="{url}" title="{name}"></div>',
		            '<span class="x-editable">{shortName}</span></div>',
		        '</tpl>',
		        '<div class="x-clear"></div>'
		    )
		}
        </script>
        <script type="text/javascript" src="js/data-view.js"></script>
    </head>
    <body>
        
    </body>
</html>

And then in your javascript put:

Code:

/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
    var xd = Ext.data;

    var store = new Ext.data.JsonStore({
        url: 'http://localhost/test/get-images.php',
        root: 'images',
        fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
    });
    store.load();

    var panel = new Ext.Panel({
        id:'images-view',
        frame:true,
        width:535,
        autoHeight:true,
        collapsible:true,
        layout:'fit',
        title:'Simple DataView (0 items selected)',

        items: new Ext.DataView({
            store: store,
            tpl: window.globalXTemplate.dataView,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',

            plugins: [
                new Ext.DataView.DragSelector(),
                new Ext.DataView.LabelEditor({dataIndex: 'name'})
            ],

            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                data.sizeString = Ext.util.Format.fileSize(data.size);
                data.dateString = data.lastmod.format("m/d/Y g:i a");
                return data;
            },
            
            listeners: {
                selectionchange: {
                    fn: function(dv,nodes){
                        var l = nodes.length;
                        var s = l != 1 ? 's' : '';
                        panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
                    }
                }
            }
        })
    });
    panel.render(document.body);

});

Hope that helps!

**king1231986** · 24 Apr 2009 9:50 PM

Thanks it works like a charm

Dataview not working

Thread Tools

Search Thread

Display

Dataview not working

Dataview not working