dataone

by el_chief

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

CSS

div.item{
float:left; margin-right:2px; margin-bottom:2px;
}

JavaScript

Ext.define('Form1', {
    extend: 'Ext.form.Panel',

    bodyPadding: 10,
    height: 700,
    title: 'Vehicle',

    initComponent: function() {

        Ext.applyIf(this, {
            items: [
                {
                    xtype:'propertygrid',
                    title:'vehicle',
                    itemId:'vehicle',
                    source:{}
                },
            {
                xtype: 'tabpanel',
                items: [
                    {
                    xtype: 'dataview',
                    itemId: 'images',
                    title: 'photos',
                        autoScroll:true,
                        height:300,
                        width:600,
                    singleSelect: true,
                    trackOver: true,
                        tpl: Ext.create('Ext.XTemplate', '<tpl for="."><div class="item"><img src="https://statictrafficdriven1.s3.amazonaws.com/{thumb_image_loc}" title="{description}"/></div></tpl>'),
                    itemSelector: 'div.item'},
                {
                    xtype: 'propertygrid',
                    title: 'specs',
                    itemId: 'specifications',
                    source: {}},
                {
                    xtype: 'propertygrid',
                    title: 'epa',
                    itemId: 'epa',
                    source: {}},
                {
                    xtype: 'propertygrid',
                    title: 'prices',
                    itemId: 'prices',
                    source: {}}
                ]}
            ]
        });
        this.callParent(arguments);
    }
});

Ext.onReady(function() {

    var f = new Form1({
        renderTo: Ext.getBody()
    });
    
    f.getForm().load({
        url: 'http://localhost/dataone/index.php?r=vehicles/get&id=400869225',
        success: function(basic, action) {

            var form = basic.owner;
            var data = action.result.data;
            
           ...