PDA

View Full Version : ux for generate popup with form and grid



ryanthe
16 Apr 2008, 3:55 AM
this ux is purposely for generating popup

any feedback is highly appreciated.



//vim: filetype=javascript:ts=4:sw=4:nu:fdc=4:nospell
/*
* Ext.ux.popGen
* @author Ryan Fabella [email protected]
* @copyright (c) 2008, by Ryan Fabella
* @date 16 April 2008
* @version 16 April 2008
*
* @license Ext.ux.popGen is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/
Ext.namespace("Ext.ux.popGen");
Ext.ux.popGen = function(config){
var dlg = new Ext.LayoutDialog(config.id || Ext.id(), {
autoCreate : true,
width:config.width || 400,
height:config.height||300,
minWidth:config.minWidth,
minHeight:config.minHeight,
shadow:config.shadow||false,
autoTabs:config.autoTabs||false,
proxyDrag:config.proxyDrag||true,
resizable:config.resizable||false,
draggable:config.draggable||true,
collapsible:config.collapsible||true,
closable:config.closable||false,
syncHeightBeforeShow: config.syncHeightBeforeShow || true,
shadow:config.shadow||false,
fixedcenter:config.fixedcenter||true,
center:config.center||{autoScroll:false}
});
dlg.setTitle(config.title);
dlg.getEl().addClass('ychooser-dlg');
dlg.addKeyListener(27, dlg.hide, dlg);
for (var cntBtn in config.button){
if (typeof config.button[cntBtn] == 'function'){
dlg.addButton(cntBtn,config.button[cntBtn],this);
}else{
if (typeof config.button.Close == 'function'){
dlg.setDefaultButton(dlg.addButton('Close', config.button.Close, dlg));
}else{
dlg.setDefaultButton(dlg.addButton('Close', dlg.hide, dlg));
};
}
}
this.dlg = dlg;
var layout = dlg.getLayout();
layout.beginUpdate();
var vp = layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate : true,
toolbar: this.tb,
fitToFrame:true
}));
var bodyEl = vp.getEl();
if (typeof config.formGrid=="object"){
this.formObj=new Array();
this.gridObj=new Array();
this.reader=new Array();
this.ds=new Array();
for (var cntformGrid in config.formGrid){
if (cntformGrid.substring(0,4)=="form"){
this.formObj[cntformGrid]=new Ext.form.Form(config.formGrid[cntformGrid].def);
multiColumnArg=new Array();
multiColumnArg.push(config.formGrid[cntformGrid].setup);
if (config.formGrid[cntformGrid].fields.length>0){
for (var cntFields=0;cntFields<config.formGrid[cntformGrid].fields.length;cntFields++){
multiColumnArg.push(config.formGrid[cntformGrid].fields[cntFields]);
}
}
this.formObj[cntformGrid].multiColumn.apply(this.formObj[cntformGrid],multiColumnArg);
this.formObj[cntformGrid].con=bodyEl.createChild({tag:'div',class:'myClass'});
}
else if(cntformGrid.substring(0,4)=="grid"){
this.reader[cntformGrid]=new Ext.data.JsonReader();
this.ds[cntformGrid]= new Ext.data.Store({
proxy: new Ext.data.HttpProxy(new Ext.data.Connection({
url: config.formGrid[cntformGrid].connConfig.url,
method: config.formGrid[cntformGrid].connConfig.method||"POST"
})),
baseParams:config.formGrid[cntformGrid].baseParams||'',
remoteSort:config.formGrid[cntformGrid].remoteSort||false,
reader:this.reader[cntformGrid]
});
this.gridObj[cntformGrid]=new Ext.ux.AutoGrid(bodyEl.createChild({tag:'div',class:'myClass'}),
config.formGrid[cntformGrid].gridConfig||
{
ds:this.ds[cntformGrid],
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColLock:false,
loadMask: true,
height:config.formGrid[cntformGrid].height||110
});
this.gridObj[cntformGrid].page=config.formGrid[cntformGrid].page||25;
}
}
}
layout.endUpdate();
Ext.apply(this, config, {
width: 540, height: 400
});
};
Ext.ux.popGen.prototype = {
show : function(){
this.render();
this.dlg.show();
},
render: function(){
if (typeof this.formObj=="object"){
for (var namaForm in this.formObj){
if (typeof this.formObj[namaForm]=="object") this.formObj[namaForm].render(this.formObj[namaForm].con);
}
}
if (typeof this.gridObj=="object"){
for (var namaGrid in this.gridObj){
if (typeof this.gridObj[namaGrid]=="object") {
this.ds[namaGrid].load({
params:{
start:0,
limit:this.gridObj[namaGrid].page
}
});
this.gridObj[namaGrid].render();
}
}
}
}
};



i use multicolumn (created by timb) and autogrid (joris) ux