ExtJS - Dialog

// create the LayoutExample application (single instance)

 

var FriendsPanel = function(){

 

// define some private variables

var dialog, view, detail;

 

 

// 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(

'

'

);

tpl.compile();

var tpl2 = new Ext.Template(

'

'

);

tpl2.compile();

 

this.view = new Ext.JsonView(Ext.get('west'), tpl, {

jsonRoot: ds,

selectedClass: 'selfriend',

singleSelect: true

});

this.detail = new Ext.JsonView(Ext.get('center'), tpl2, {

jsonRoot: ds2

});

 

this.view.prepareData = function(data){

return {

uid: data.uid,

name: data.name.replace(/<\/?[^>]+>/gi, '').ellipse(350)

 

};

};

var dt=this.detail;

this.view.on("click", function(vw, index, node, e){

dt.load('index.php?id=1&type=1001&data=friends&bl='+node.firstChild.id);

});

 

this.view.load('index.php?id=1&type=1001&data=friends');

this.view.on("load",function() {

this.select('fi_'+id.substring(2));

});

this.detail.load('index.php?id=1&type=1001&data=friends&bl='+id);

 

} else {

this.view.select('fi_'+id.substring(2));

this.detail.load('index.php?id=1&type=1001&data=friends&bl='+id);

}

ext9=Ext.get('friends');

 

dialog.show(ext9.dom);

 

}

};

}();

 

String.prototype.ellipse = function(maxLength){

if(this.length > maxLength){

return this.substr(0, maxLength-3) + '...';

}

return this;

};

 

// using onDocumentReady instead of window.onload initializes the application

// when the DOM is ready, without waiting for images and other resources to load

Ext.EventManager.onDocumentReady(FriendsPanel.init, FriendsPanel, true);