imageList.js #4

////////////////////////////////////////////////////////////////////////////
// Rev: 2010.1 (P4JsApi 1.0 Example)
//
// NOTE: This is an example only, and should be modified to work in
// a production environment! No warranty is expressed or implied.
// Scripts should be tested thoroughly on a test server before
// using in a production environment.
//
////////////////////////////////////////////////////////////////////////////
// Copyright (c) 2010, Perforce Software, Inc.  All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// 1.  Redistributions of source code must retain the above copyright
//     notice, this list of conditions and the following disclaimer.
//
// 2.  Redistributions in binary form must reproduce the above copyright
//     notice, this list of conditions and the following disclaimer in the
//     documentation and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL PERFORCE SOFTWARE, INC. BE LIABLE FOR ANY
// DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
// (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
// LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
// ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
// THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
////////////////////////////////////////////////////////////////////////////

Ext.onReady(function() {
    try {
        var generalInfoHtmlText = '<p>Welcome ' + P4JsApi.getUser() + '!<br/><br/>' +

        'P4JsApi api version: <i>' + P4JsApi.getApiVersion() + '</i><br/>' +

        'Below is the table displaying the Perforce built-in images.</br>' +

        'This will give developers the ability to maintain an integrated look when creating new custom applications.</p>';

        var p4vimages = P4JsApi.getImageNames();
        var imageNames = p4vimages["imageNames"];
        var imagesData = [];

        for (var i = 0; i < imageNames.length; i++) {
            imagesData.push([imageNames[i], P4JsApi.getImage(imageNames[i])]);
        }

        var dataStore = new Ext.data.ArrayStore({
            data: imagesData,
            fields: ['imageName', 'image']
        });

        // Custom function used for column renderer to change font
        // @param {Object} val:
        function fontChange(val) {
            return '<span class="imageNameFont">' + val + '</span>';
        }

        // Custom function used for column renderer to display image
        // @param {Object} val
        function encodedDataToImage(val) {
            return '<img src="' + val + '" alt="No Image"/>';
        }

        var imageTable = new Ext.grid.GridPanel({
            store: dataStore,
            columns: [
            {
                header: '<center><b>Image Name<b/></center>',
                width: 200,
                sortable: true,
                renderer: fontChange,
                dataIndex: 'imageName'
            },
            {
                header: '<center><b>Image</b></center>',
                width: 450,
                sortable: true,
                renderer: encodedDataToImage,
                dataIndex: 'image'
            }
            ],
            stripeRows: true,
            border: true,
            enableColLock: false,
            selModel: new Ext.grid.RowSelectionModel({
                singleSelect: false
            })
        });

        var display = new Ext.Window({
            id: 'display',
            title: 'Image Table',
            closable: false,
            maximizable: false,
            maximized: true,
            layout: 'border',
            items: [{
                region: 'north',
                margins: '10 5 5 5',
                cmargins: '10 5 5 5',
                height: 100,
                width: 650,
                cls: 'northRegionFont',
                html: generalInfoHtmlText
            },
            {
                region: 'center',
                layout: 'fit',
                items: imageTable
            }]
        });

        dataStore.loadData(imagesData);
        display.show();
    } catch(e) {
        alert(e);
    }
});