1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    7
    Vote Rating
    0
    zulfiqar.malik is on a distinguished road

      0  

    Default ExtJS custom proxy

    ExtJS custom proxy


    I am using ExtJS MVC to display pictures from the FileSystem using the FileSystem API. My list view that displays the information is defined as:

    Code:
        this.items = Ext.create('Ext.view.View', {
            store: store,
            tpl: [
                '<tpl for=".">',
                    '<div align="center">',
                    '<div class="thumb-wrap" id="{name}">',
                    '<div class="thumb"><img src="{thumbnail}" title="{name}" width="{metadata.width}" height="{metadata.height}"></div>',
                    '<span class="x-editable">{name}</span></div>',
                    '</div>',
                '</tpl>',
                '<div class="x-clear"></div>'
            ],
            multiSelect: false,
            width: this.width - 18,
            trackOver: true,
            overItemCls: 'x-item-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images to display',
            itemId: 'picturesListView',
            plugins: [
                Ext.create('Ext.ux.DataView.DragSelector', {}),
                Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
            ],
            prepareData: function(data) {
                Ext.apply(data, {
                    shortName: Ext.util.Format.ellipsis(data.name, 15),
                    sizeString: Ext.util.Format.fileSize(data.size),
                    dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
                });
                return data;
            }
        });
    Now initially my Store was defined as:
    Code:
    data : [
        { name: 'File4', thumbnail: '/piko/desktop/img/my_photos.png', url: '/img/faces.jpg', size: 32000, metadata: { type: 'file', width: 64, height: 64 }}]
    Everything worked fine like this, my list's events were getting fired and correct css styling was performed.
    However, I needed to have a proxy for my store so I created a simple one that just returns the same data in the read call like this:


    Code:
    read: function(operation, callback, scope)
    {
        var data = [
            { data: { name: 'File1', thumbnail: '/piko/desktop/img/my_photos.png', url: '/img/faces.jpg', size: 32000, metadata: { type: 'file', width: 64, height: 64 }}, join: function(store) { this.store = store; }},
        ];
        operation.resultSet = Ext.create('Ext.data.ResultSet', {
            records: data,
            total: data.length,
            loaded: true
        });
    
    
        operation.setCompleted();
        operation.setSuccessful();
    
    
        if (typeof callback == 'function') {
            callback.call(scope || this, operation);
        }
    }
    and I used the proxy in my store like:


    and I used the proxy in my store like:


    Code:
    proxy: {
        type: 'pictures'
    }
    The static data was removed. This worked and my images and all the relevant data was getting displayed in the view. However, my events stopped working and my CSS styling wasn't getting applied to my list element's any more.
    Can someone please explain what I need to do to get this to work with the correct events firing and correct styling getting applied.
    Thank you.

  2. #2
    Sencha User
    Join Date
    Dec 2010
    Posts
    7
    Vote Rating
    0
    zulfiqar.malik is on a distinguished road

      0  

    Default


    Anyone? Someone. Is there a simple enough proxy usage example with ListView or other UI element that uses custom styling and/or events?

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    7
    Vote Rating
    0
    zulfiqar.malik is on a distinguished road

      0  

    Default


    Posting full source so that someone can help me out here.

    PicturesStore:

    Code:
    Ext.define('uoozo.piko.store.PicturesStore', {
        extend: 'Ext.data.Store',
        model: 'uoozo.piko.model.PicturesModel',
        autoLoad: true,
    
    
        requires: [
            'uoozo.piko.proxy.PicturesProxy'
        ],
    
    
        proxy: {
            type: 'pictures'
        }
    });
    The FileSystemProxy:

    Code:
    Ext.define('uoozo.piko.proxy.FileSystemProxy', {
        extend: 'Ext.data.proxy.Client',
        alias: 'proxy.filesystem',
    
    
        constructor: function(config)
        {
            this.callParent(arguments);
        },
    
    
        //inherit docs
        create: function(operation, callback, scope)
        {
        },
    
    
        //inherit docs
        read: function(operation, callback, scope)
        {
            operation.setStarted();
    
    
            var data = [
                { data: { name: 'File1', thumbnail: '/piko/desktop/img/my_photos.png', url: '/img/faces.jpg', size: 32000, metadata: { type: 'file', width: 64, height: 64 }},
                    join: function(store) { this.store = store; },
                    unjoin: function(store) { this.store = store; }},
    //            { data: { name: 'File2', thumbnail: '/piko/desktop/img/my_photos.png', url: '/img/faces.jpg', size: 32000, metadata: { type: 'file', width: 64, height: 64 }}, join: function(store) { this.store = store; }},
            ];
    
    
            operation.resultSet = Ext.create('Ext.data.ResultSet', {
                records: data,
                total: data.length,
                loaded: true
            });
    
    
            operation.commitRecords(data);
            operation.setCompleted();
            operation.setSuccessful();
    
    
            if (typeof callback == 'function') {
                callback.call(scope || this, operation);
            }
        },
    
    
        //inherit docs
        update: function(operation, callback, scope)
        {
        },
    
    
        //inherit
        destroy: function(operation, callback, scope)
        {
        },
    
    
        clear: function()
        {
        }
    });
    The PicturesProxy is just derived from FileSystemProxy with no overrides right now other than alias set to "proxy.pictures". The PicturesView is finally defined as:

    Code:
    Ext.define('uoozo.piko.view.PicturesView', {
        extend: 'Ext.panel.Panel',
        alias: "widget.PicturesView",
        autoShow: true,
        title: 'Pictures',
        width: 150,
        margins: '5 0 0 0',
        cmargins: '5 5 0 0',
        layout: {
            type: 'hbox',
            align: 'center',
            pack: 'center'
        },
        autoScroll: true,
        id: 'pictures-view',
    
    
        requires: [
            'Ext.data.*',
            'Ext.util.*',
            'Ext.view.View',
            'Ext.ux.DataView.DragSelector',
            'Ext.ux.DataView.LabelEditor'
        ],
    
    
        store: 'PicturesStore',
    
    
        initComponent: function()
        {
            this.items = Ext.create('Ext.view.View', {
                store: this.store,
                tpl: [
                    '<tpl for=".">',
                        '<div align="center">',
                        '<div class="thumb-wrap" id="{name}">',
    //                    '<div class="thumb"><img src="{thumbnail}" title="{name}" width="{metadata.width}" height="{metadata.height}" style="background-color: red;"></div>',
                        '<span class="x-editable">{name}</span></div>',
                        '</div>',
                    '</tpl>',
                    '<div class="x-clear"></div>'
                ],
                multiSelect: false,
                width: this.width - 18,
                trackOver: true,
                overItemCls: 'x-item-over',
                itemSelector: 'div.thumb-wrap',
                emptyText: 'No images to display',
                itemId: 'picturesListView',
                plugins: [
                    Ext.create('Ext.ux.DataView.DragSelector', {}),
                    Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
                ],
                prepareData: function(data) {
                    Ext.apply(data, {
                        shortName: Ext.util.Format.ellipsis(data.name, 15),
                        sizeString: Ext.util.Format.fileSize(data.size),
                        dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
                    });
                    return data;
                }
            });
    
    
            this.callParent(arguments);
        }
    });
    and finally the CSS is as follows:

    Code:
    #pictures-view .x-panel-body {
        font-size: 11px;
        font-family: tahoma, arial, verdana, sans-serif;
    }
    
    
    #pictures-view .thumb {
        padding-bottom: 0;
    }
    
    
    #pictures-view .thumb-wrap {
        float: left;
        margin: 4px;
        margin-right: 0;
        padding: 5px;
    }
    
    
    #pictures-view .thumb-wrap span {
        display: block;
        overflow: hidden;
        text-align: center;
        width: 86px;
    }
    
    
    #pictures-view .x-item-over {
        border-color: #777;
        border-width: 2px;
        border-style: solid;
        background-color: rgb(75, 83, 103);
    }
    
    
    #pictures-view .x-item-selected {
        border-color: #777;
        border-width: 2px;
        border-style: solid;
        background-color: rgb(75, 83, 103);
    }
    
    
    #pictures-view .x-item-selected .thumb {
        background: transparent;
    }
    
    
    #pictures-view .loading-indicator {
        font-size: 11px;
        /*background-image:url('../../resources/themes/images/default/grid/loading.gif');*/
        /*background-repeat: no-repeat;*/
        /*background-position: left;*/
        /*padding-left:20px;*/
        /*margin:10px;*/
    }
    
    
    .x-view-selector {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        border: 1px dotted;
        opacity: .5;
        -moz-opacity: .5;
        filter: alpha(opacity=50);
        zoom: 1;
        background-color: #c3daf9;
        border-color: #3399bb;
    }
    
    
    .ext-strict .ext-ie .x-tree .x-panel-bwrap {
        position: relative;
        overflow: hidden;
    }
    I'd really appreciate if someone can tell me why the styling is not getting applied and the events are not getting triggered at all. Thanks.

  4. #4
    Sencha User
    Join Date
    Dec 2010
    Posts
    7
    Vote Rating
    0
    zulfiqar.malik is on a distinguished road

      0  

    Default


    Ok, so I found out what the problem was. Had a look at the WebStorage.js source code to get an idea. Basically every instance of the data must be of the type of the model that is associated with the proxy. I was incorrectly assuming it to be just another Javascript object. So instead of using that I did this:

    Code:
            
    var fileData = { name: 'File1', thumbnail: '/piko/desktop/img/my_photos.png', url: '/img/faces.jpg', size:                 
    var record = new this.model(fileData, Ext.id(), fileData);
    var records = [record];
    So essentially you do a new this.model(data, id, data) for every 'data' item that you load for any given proxy. I hope this is helpful for people writing their own proxy in the future.

Tags for this Thread

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