PDA

View Full Version : problem in ext advance data view



AmilaThennakoon
17 Jul 2010, 1:35 AM
dear All

im novice for this subject but i have immediate requirement .... i have a gride panel which has center panel, east panel & west panel so im using center panel for data view and my requirement is wen i click image in center panel i want see that image in west panel this is may code



Ext.onReady(function(){
var xd = Ext.data;
Ext.BLANK_IMAGE_URL = 'lib/resources/images/s.gif';


var store = new Ext.data.JsonStore({
id:"dataStore",
url: 'get-images.php',
root: 'images',
fields: [
'name', 'url',
{name:'size', type: 'float'},
{name:'lastmod', type:'date', dateFormat:'timestamp'}
],
listeners: {
'load': {fn:function(){ view.select(0); }, single:true}
}
});
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 westtp = new Ext.XTemplate(
'<div class="details">',
'<tpl for=".">',
'<img src="{url}"><div class="details-info">',
'<b>Name:</b>',
'<span>{name}</span>',
'<b>Size:</b>',
'<span>{sizeString}</span>',
'<b>Last Modified:</b>',
'<span>{dateString}</span></div>',
'</tpl>',
'</div>'
);


westtp.compile();
view = new Ext.DataView({
//store: store,
id:'view',
loadingText : 'Loading Images ...',
tpl: tpl,
autoHeight:true,
store: store,
// multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: '<div style="padding:10px;">No images match the specified filter</div>',
singleSelect : true,




sortImages : function(){
var v = Ext.getCmp('sortSelect').getValue();
this.view.store.sort(v, v == 'name' ? 'asc' : 'desc');
this.view.select(0);
},

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('Image Gallary ('+l+' item'+s+' selected)');
}
},


dblclick:function(){

},



click:function(){
var westtp = new Ext.XTemplate(
'<div class="details">',
'<tpl for=".">',
'<img src="{url}"><div class="details-info">',
'<b>Name:</b>',
'<span>{name}</span>',
'<b>Size:</b>',
'<span>{sizeString}</span>',
'<b>Last Modified:</b>',
'<span>{dateString}</span></div>',
'</tpl>',
'</div>'
);
var selNode = view.getSelectedNodes();


// i think the error comes fro hear
var detailEl = Ext.getCmp('img-detail-panel').body;
if(selNode && selNode.length > 0){
selNode = selNode[0];
//var e= 1;
// Ext.getCmp('ok-btn').enable();
// var data = this.lookup[selNode.id];
detailEl.hide();
//detailsTemplate.compile();
westtp.overwrite(detailEl,selNode.id);
detailEl.slideIn('l', {stopFx:true,duration:.2});
}
}
}
});

var eastPanel={
//id: 'img-detail-panel',
region: 'east',
//renderTo: document.body,
//tpl: this.detailsTemplate,
title: 'Quick Details',
// collapsible: true,
//titleCollapse:true,
//collapseMode :'mini',
split: true,
width: 200, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
//id: 'img-detail-panel',
minTabWidth:100,
resizeTabs:true,
border: false, // already wrapped so don't add another border
activeTab: 0, // second tab initially active
tabPosition: 'bottom',
items: [{
id:'img-detail-panel',
//split: true,
xtype : "panel",
title: 'Basic Info',
closable: false
//frame :true



}]
})
}

var westPanel={

layout:"fit",
id:"westPanel",
region:"west",

// split:true,
html:"Reserved For Menu...",
bodyBorder : false,
width:180
//items:[tabPanel]




}

var panel = new Ext.Panel({
layout:"fit",
id:'images-view',
// frame:true,
autoScroll : true,
//collapsible:true,
layout:'fit',
title:'Image Gallery',
tbar: [ // <--- ToolBar
{text:'Back',iconCls:'back'}, // <--- Buttons

{text:'Reload',iconCls:'reload', handler:function(){


Ext.getCmp('filter').reset();
//this.view.getEl().dom.scrollTop = 0;

Ext.getCmp('view').store.clearFilter();
Ext.getCmp('view').select(0);
}},
'-', // <--- add a vertical separator bar between toolbar items
{
xtype: 'buttongroup', // <--- grouping the buttons
items:[ {
text: 'Filter:'
},
{
xtype:'textfield',
emptyText : " Enter Child name ",
id:'filter',
fieldLabel : "Filter",
width:250,
selectOnFocus: true,
listeners: {
'render': {fn:function(){
Ext.getCmp('filter').getEl().on('keyup', function(){
var filter = Ext.getCmp('filter');
this.view.store.filter('name', filter.getValue());
this.view.select(0);
}, this, {buffer:500});
}, scope:this}
}

},
{iconCls:'goto'}
]
},
'->',
{
id: 'sortSelect',
xtype: 'combo',
typeAhead: true,
triggerAction: 'all',
width: 100,
editable: false,
mode: 'local',
displayField: 'desc',
valueField: 'name',
lazyInit: false,
value: 'name',
store: new Ext.data.ArrayStore({
fields: ['name', 'desc'],
data : [['name', 'Name'],['size', 'File Size'],['lastmod', 'Last Modified']]
}),
listeners: {
'select': {fn:this.view.sortImages, scope:this}
}
},
new Ext.Toolbar.Fill(), // <--- we fill the empty space
{text:'Home',iconCls:'home'}
],
maximizable: true,
maskDisabled: true,
items:[this.view]
});


/// var tbPanel=Ext.



var centerPanel = new Ext.TabPanel({

minTabWidth:100,
resizeTabs:true,
closable:true,
border: false, // already wrapped so don't add another border
activeTab: 0, // second tab initially active
tabPosition: 'top'


});


var centerPanel={

layout:"fit",
region:"center",
tetle:"center",
items:[panel]

}









var viewPort=new Ext.Viewport({


layout:"fit",
items:[{layout:"border",
items:[eastPanel,westPanel,centerPanel]}]



});
});
`http://cometicitcare.com/images/shot.jpg

:((:((:((:((:(( please help me