1. #1
    Ext User
    Join Date
    Mar 2009
    Posts
    14
    Vote Rating
    0
    king1231986 is on a distinguished road

      0  

    Default Dataview not working

    Dataview not working


    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

  2. #2
    Sencha User
    Join Date
    May 2007
    Posts
    22
    Vote Rating
    0
    timothy is on a distinguished road

      0  

    Default


    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!

  3. #3
    Ext User
    Join Date
    Mar 2009
    Posts
    14
    Vote Rating
    0
    king1231986 is on a distinguished road

      0  

    Default


    Thanks it works like a charm

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar