Code:
var FriendsPanel = function(){
// everything in this space is private and only accessible in the HelloWorld block
// define some private variables
var dialog, showBtn,id;
// return a public interface
return {
init : function(){
},
showDialog : function(id){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("friends-dlg", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
west: {
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true,
autoScroll:true
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true,
animate: true
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Schliessen', dialog.hide, dialog);
var layout = dialog.getLayout();
layout.beginUpdate();
var wl=layout.add('west', new Ext.ContentPanel('west', {title: 'Freunde'}));
var cl=layout.add('center', new Ext.ContentPanel('center', {title: 'Details'}));
layout.endUpdate();
var reader = new Ext.data.JsonReader({
totalProperty: 'results',
root:'items'
}, [{name: 'uid'}, {name: 'name'}]);
var reader2 = new Ext.data.JsonReader({
totalProperty: 'results',
root:'items'
}, [{name: 'uid'}, {name: 'name'}, {name: 'image'}]);
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'index.php?id=1&type=1001&data=friends'
}),
reader : reader
});
ds2 = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'index.php?id=1&type=1001&data=cities&bl='
}),
reader : reader2
});
ds.on('load', this.onLoad, this);
ds2.on('load', this.onLoad, this);
var tpl = new Ext.Template(
'<div class="friend-item" id="fi_{uid}">' +
'<a href="#" id="f_{uid}">{name}</a>' +
'</div>'
);
tpl.compile();
var tpl2 = new Ext.Template(
'<div class="friend-detail">' +
'<h2>{name}</h2>' +
'<p><img src="{image}" /></p>' +
'<p>{userpage}</p>' +
'</div>'
);
tpl2.compile();
var view = new Ext.JsonView(Ext.get('west'), tpl, {
jsonRoot: ds,
selectedClass: 'selfriend',
singleSelect: true
});
var detail = new Ext.JsonView(Ext.get('center'), tpl2, {
jsonRoot: ds2
});
view.prepareData = function(data){
return {
uid: data.uid,
name: data.name.replace(/<\/?[^>]+>/gi, '').ellipse(350)
};
};
view.on("click", function(vw, index, node, e){
//alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
detail.load('index.php?id=1&type=1001&data=friends&bl='+node.firstChild.id);
});
view.load('index.php?id=1&type=1001&data=friends');
view.on("load",function() {view.select('fi_'+id.substring(2));});
detail.load('index.php?id=1&type=1001&data=friends&bl='+id);
} else {
//select the right user here
view.on("load",function() {view.select('fi_'+id.substring(2));}); //doesn't work
}
ext9=Ext.get('ext-gen9');
dialog.show(ext9.dom);
}
};
}();