1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Bangalore
    Posts
    65
    Vote Rating
    0
    Sabareesh is on a distinguished road

      0  

    Default Data view in Extjs4

    Data view in Extjs4


    I have the following code for the dataview .The problem is i am getting the data view vertically , i wanted it to be horizontal . Am i missing something in the code .

    Ext.define('Image', {
    extend: 'Ext.data.Model',
    fields: [
    { name:'src', type:'string' },
    { name:'caption', type:'string' }
    ]
    });
    var artiststore = new Ext.create('Ext.data.Store', {
    id:'imagesStore',
    model: 'Image',
    data: [
    { src:'assets/pic/DSC03499.JPG', caption:'photo1' },
    { src:'assets/pic/DSC03500.JPG', caption:'photo2' },
    { src:'assets/pic/DSC03501.JPG', caption:'photo3' },
    { src:'assets/pic/DSC03502.JPG', caption:'photo4' }
    ]
    });

    Ext.define('Arttist_Panel', {
    extend: 'Ext.panel.Panel',
    alias :'widget.artist_panel',
    id:'images-view',
    frame:true,
    width:'100%',
    height : 700,
    style : 'margin-left: 60px',
    layout:'hbox',
    layoutConfig:{
    pack:'center'
    },
    autoScroll:true,
    initComponent: function() {
    var me = this;
    me.items = [{
    xtype: 'dataview',
    id:'artistsDataView',
    store: artiststore,
    tpl: new Ext.XTemplate(
    '<tpl for=".">',
    '<div class="thumb-wrap" id="{name}" >',
    '<div class="thumb"><img src="{src}" height="54" width="54" title="{caption}" ></div>',
    '<span class="x-editable">{caption}</span></div>',
    '</div>',
    '</tpl>',
    '<div class="x-clear"></div>'
    ),
    autoHeight:true,
    width:'100%',
    overClass:'x-item-over',
    itemSelector:'div.thumb-wrap',
    emptyText: 'Loading Images....',
    plugins: [
    Ext.create('Ext.ux.DataView.DragSelector', {}),
    Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
    ]
    }];
    me.callParent(arguments);
    }
    });

    Thanks in Advance.

  2. #2
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    114
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    The use of the hbox layout is incorrect. It is being applied to the single 'item' in the items config (your data view). This looks a lot like the data view example. Did you include the CSS that goes with that example? You'll need that to get the data view items to line up next to each other as opposed the default behavior of the <div> tag.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Bangalore
    Posts
    65
    Vote Rating
    0
    Sabareesh is on a distinguished road

      0  

    Default Data view in extjs 4

    Data view in extjs 4


    thanks chamacs.

    ya i figured that i was missing the data-view.css

    Now it is working fine .

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi