PDA

View Full Version : Tab Panel ,Form Panel and Grid



classicintruder
22 Jun 2010, 3:59 PM
Hello

My Name is Timothy l have been working with extjs for some time now and l have created an application that uses tree for navigation and Tab to show the form for the user,on my form are in another script file whiles my main layout are in one script file, when l load the tab panel for the first time the grid and the form show alright but when l close the tab panel and click again the form distorts any help


layout.js

// JavaScript Document

Ext.ns('iSchool');

iSchool.Academic = function(conf)
{

var TabName = null;

MasterPanel = function(conf)
{
config={
title: 'iSchool Management - Read Me!',
region: 'center',
//html:'Hello this is my first Html application'
//frame:true

};

Ext.apply(config, conf || {});
MasterPanel.superclass.constructor.call(this,config);
}

Ext.extend(MasterPanel,Ext.Panel,{
clear:function()
{
this.body.update('');
}
});


var masterPanelConf ={};
if(conf && conf.masterPanelConf)
{
masterPanelConf = conf.masterPanelConf;
}
var masterPanel = new MasterPanel(masterPanelConf);


// var eduSysPanel = iSchool.Setup.EduSystemWindow();

MasterTab = function(conf)
{
config = {
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
plain:true,
resizeTabs:true,
tabWidth:135,
enableTabScroll:true,
deferredRender : false,
activeTab:0,
items: [masterPanel],
defaults: {autoScroll:true,closable:true},
plugins: new Ext.ux.TabCloseMenu()
};
Ext.apply(config,conf || {});
MasterTab.superclass.constructor.call(this,config)
}
var masterTabConfig = {};
if(conf && masterTabConfig)
{
masterTabConf = conf.masterTabConf;
}

Ext.extend(MasterTab,Ext.TabPanel,{


addTab:function(form)
{
tab = this.add(form);
tab.doLayout();
this.setActiveTab(form.id);

//tab.enter();
}

});

var masterTabPanel = new MasterTab(masterTabConfig);

DetailPanel = function(conf)
{
config = {
id:'details-panel',
layout:'fit',
title:'Details',
};
Ext.apply(config,conf || {});
DetailPanel.superclass.constructor.call(this, config);
}

Ext.extend(DetailPanel,Ext.Panel);
var detailsPanelConf={}
if(conf && conf.detailsPanelConf)
{
detailsPanelConf = conf.detailsPanelConf;
}
var detailPanel = new DetailPanel(detailsPanelConf);


NavPanel = function(conf)
{
config = {
id:'nav',
title: 'Main Menu',
region:'west',
animate:true,
border: true,
containerScroll:true,
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
handler:this.OnClick.createDelegate(this,[]),
/*handler:this.OnClick,*/
items: [{
//html: Ext.example.shortBogusMarkup,
title:'Registry',
autoScroll:true,
border:false,
iconCls:'nav',
items:{
xtype:'treepanel',
id:'my-registry',
autoscroll:true,
animate:true,
containerScroll:true,
border:false,
dataUrl:'menu.php',
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,

root:
{
nodeType:'async',
text:'Main Menu',
draggable:false,
id:'StudentAdmin'
},
listeners:{
click:this.OnClick
}
}
},{
title:'Academic',
// html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
},{
title:'Setup',
// html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings',
items:{
xtype:'treepanel',
id:'my-settings',
autoscroll:true,
animate:true,
containerScroll:true,
border:false,
dataUrl:'menu.php',
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,
root:
{
nodeType:'async',
text:'Main Menu',
draggable:false,
id:'Setttings'
},
listeners:{
click:this.OnClick
}
}
}
,{
title:'Reports',
// html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings' }]
};

Ext.apply(config,conf || {});
NavPanel.superclass.constructor.call(this,config);
}

Ext.extend(NavPanel,Ext.Panel,{

OnClick:function(n,panel){

var attrib = n.attributes.text;
className = attrib.replace(' ','_');
conf = {};
switch(attrib)
{
case 'Education System':
eduSystem = new Education_System({});
masterTabPanel.addTab(eduSystem);
eduSystem.doLayout();

break;
case 'House Management':
house = new House_Management({});
masterTabPanel.addTab(house);
break;
case 'Programs':
program = new Programs({});
masterTabPanel.addTab(program);
break;

}



}
});

var navPanelConf={};
if (conf && conf.navPanelConf)
{
navPanelConf = conf.navPanelConf;
}
var navPanel = new NavPanel(navPanelConf);

MasterDetailsCnt = function(conf){
config = {
title:'Main Window',
layout: 'fit',
region: 'center',
collapsible: false,
border: true,
margins: '5 5 5 0',
id: 'main-view',
hideMode: 'offsets',

items: [masterTabPanel]
};

Ext.apply(config, conf || {});
MasterDetailsCnt.superclass.constructor.call(this, config);
}

Ext.extend(MasterDetailsCnt,Ext.Panel);
var masterDetailsCntConfig = {};
if(conf && conf.masterDetailsCntConfig)
{
masterDetailsCntConfig = conf.masterDetailsCntConfig;
}
var masterDetailsCnt = new MasterDetailsCnt(masterDetailsCntConfig);
config =
{
layout:'border',
defaults:
{
//collapsible:false,
split:true
},
items:[{xtype:'box',el:'app-header',height:40,region:'north'},navPanel,masterDetailsCnt]
};
if (conf)
{
Ext.apply(config,conf);
}
iSchool.Academic.superclass.constructor.call(this, config);
}

Ext.extend(iSchool.Academic,Ext.Viewport);

Ext.onReady(function(){
Ext.QuickTips.init();
//var p= new iSchool.Academic.NavPanel({});
var container = new iSchool.Academic({});
});



setup.js

// JavaScript Document

Ext.ns('iSchool');

//define store for EducationalSystem
systemProxy = { url:'_ss_process_sys_.php?btn=Load',
method:'POST' };
var sysproxy = new DProxy(systemProxy);

var systemDataStore = { proxy:sysproxy,

fields:[
{name:'sys_id',type:'string',mapping:'sys_id'},
{name:'sys_name',type:'string',mapping:'sys_name'},
{name:'sys_notes',type:'string',mapping:'sys_notes'}],
root:'results',
totalProperty:'totalCount' };

var sysStore = new DStore(systemDataStore);
sysStore.LoadData();
//All the SetupForms

var systemGrid = { id:'Edu System',
store: sysStore,
columns:[

{ id:'sys_id',header:'Sys Id',sortable:true,dataIndex:'sys_id' },
{ id:'sys_name',header:'Name',sortable:true,dataIndex:'sys_name' },
{ id:'sys_notes',header:'Notes',sortable:true,dataIndex:'sys_notes'}
],
stripeRows:true,
autoExpandColumn:'sys_name',
autoHeight:true,
width:'95%',
//layout:'border',
//hieght:500,
Title: 'Educational Systems',
viewConfig: {
autoFill: true,
forceFit: true
},
sm:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners:{
rowselect:{
fn:function(sm,index,record){
Ext.Msg.alert('You Selected ',record.data.sys_name);
}
}
}
})
};
var sysGrid = new Grid_Panel(systemGrid);



Education_System =function(conf) {

config={

id:'Educational System',
labelWidth:80,
labelAlign: 'left',

//url:'login.php',
frame:true,
title:'Educational System',
defaultType:'textfield',
monitorValid:true,
autoHeight: true,
columnWidth:.5,
layout: 'form',
border:false,

items:[ { fieldLabel:'System Id',name:'systemid',id:'systemid',allowBlank:false,width:80, anchor:'50%'},
{ fieldLabel:'System Name',name:'name',id:'name',allowBlank:false,width:200, anchor:'95%'},
{
xtype: 'textarea',
fieldLabel: 'System Notes',
name: 'notes',
id:'notes',
width:200,
flex: 1, anchor:'95%' },


sysGrid
],
buttons:[{
text:'Save',
formBind:true,
width:100,
handler:this.process
}]


};
Ext.apply(config, conf || {});
Education_System.superclass.constructor.call(this,config);
}


Ext.extend(Education_System,Ext.Panel, {
process:function(btn){
this.getForm().submit({
method:'POST',
waitTitle:'Connecting....',
waitMsg :'Sending Data...',

success:function()
{
Ext.Message.alert('Status','Data Successfully Save...',
function(btn,text)
{
if(btn == 'ok')
{

}
});
},
failure:function(form,action)
{
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Error While Saving Data..',obj.errors.reason);
} else
{
Ext.Msg.alert('Warning!','An Unexpected Error occured while trying to Save Data');
}

}
})
}

});
//var eduSysConf = {};
//var eduSystem = new Education_System(eduSysConf);
//define store for EducationalSystem
houseProxy = { url:'_ss_process_housing_.php?btn=Load',
method:'POST' };
var husproxy = new DProxy(houseProxy);

var houseDataStore = { proxy:husproxy,

fields:[
{name:'house_id',type:'string',mapping:'house_id'},
{name:'house_name',type:'string',mapping:'house_name'},
{name:'house_notes',type:'string',mapping:'house_notes'}],
root:'results',
totalProperty:'totalCount' };

var husStore = new DStore(houseDataStore);
husStore.LoadData();
//All the SetupForms

var HouseGrid = { id:'House Management',
store: husStore,
columns:[

{ id:'house_id',header:'House Id',sortable:true,dataIndex:'house_id' },
{ id:'house_name',header:'House Name',sortable:true,dataIndex:'house_name' },
{ id:'house_notes',header:'House Notes',sortable:true,dataIndex:'house_notes'}
],
stripeRows:true,
autoExpandColumn:'sys_name',
autoHeight:true,
width:'95%',
//layout:'border',
//hieght:500,
Title: 'House Management',
viewConfig: {
autoFill: true,
forceFit: true
}
};
var houseGrid = new Grid_Panel(HouseGrid);


House_Management=function(conf) {

config={

id:'House System',
labelWidth:80,
labelAlign: 'left',
//url:'login.php',
frame:true,
title:'House System',
defaultType:'textfield',
monitorValid:true,
autoHeight: true,
columnWidth:.5,
layout: 'form',
border:false,

items:[ { fieldLabel:'House Id',name:'houseid',id:'houseid',allowBlank:false,width:80, anchor:'50%'},
{ fieldLabel:'House Name',name:'housename',id:'housename',allowBlank:false,width:200, anchor:'95%'},
{
xtype: 'textarea',
fieldLabel: 'House Notes',
name: 'notes',
id:'housenotes',
width:200,
flex: 1, anchor:'95%' },
houseGrid
],
buttons:[{
text:'Save',
formBind:true,
width:100,
handler:this.process
}]


};
Ext.apply(config, conf || {});
House_Management.superclass.constructor.call(this,config);
}
Ext.extend(House_Management,Ext.Panel, {
process:function(btn){
this.getForm().submit({
method:'POST',
waitTitle:'Connecting....',
waitMsg :'Sending Data...',

success:function()
{
Ext.Message.alert('Status','Data Successfully Save...',
function(btn,text)
{
if(btn == 'ok')
{

}
});
},
failure:function(form,action)
{
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Error While Saving Data..',obj.errors.reason);
} else
{
Ext.Msg.alert('Warning!','An Unexpected Error occured while trying to Save Data');
}

}
})
}
});

//define the Combo Control
//var eduSysConf = {};
//var eduSystem = new Education_System(eduSysConf);
//define store for EducationalSystem
programProxy = { url:'_ss_process_progam_.php?btn=Load',
method:'POST' };
var pproxy = new DProxy(programProxy);

var programDataStore = { proxy:pproxy,

fields:[
{name:'id',type:'string',mapping:'id'},
{name:'sys_id',type:'string',mapping:'sys_id'},
{name:'prg_id',type:'string',mapping:'prg_id'},
{name:'prg_name',type:'string',mapping:'prg_name'}],
root:'results',
totalProperty:'totalCount' };

var prgStore = new DStore(programDataStore);
prgStore.LoadData();
//All the SetupForms

var programGrid = { id:'Program Setup',
store: prgStore,
columns:[
{ id:'id',header:'Id #',sortable:true,dataIndex:'id' },
{ id:'sys_id',header:'System Id',sortable:true,dataIndex:'sys_id' },
{ id:'prg_id',header:'Program Id',sortable:true,dataIndex:'prg_id' },
{ id:'prg_name',header:'Program Name',sortable:true,dataIndex:'prg_name'}
],
stripeRows:true,
autoExpandColumn:'prg_name',
autoHeight:true,
width:'95%',
//layout:'border',
//hieght:500,
Title: 'Program Setup',
viewConfig: {
autoFill: true,
forceFit: true
}
};
var progGrid = new Grid_Panel(programGrid);

Programs = function(conf)
{

config =
{
id:'Program',
labelWidth:100,
labelAlign: 'left',
//url:'login.php',
frame:true,
title:'Program',
defaultType:'textfield',
monitorValid:true,
autoHeight: true,
columnWidth:.5,
layout: 'form',
border:false,

items:[
{
xtype: 'combo',
displayedField:'System',
valueField:'System',
editable:false,
mode:'local',
forceSelection:true,
triggerAction:'all',
fieldLabel:'System Id',
emptyText: 'Select a make ...',
selectOnFocus:true
},
{ fieldLabel:'Program Id',name:'programid',id:'programid',allowBlank:false,width:80, anchor:'50%'},
{ fieldLabel:'Program Name',name:'programname',id:'programname',allowBlank:false,width:200, anchor:'95%'},
progGrid
],
buttons:[{
text:'Save',
formBind:true,
width:100,
handler:this.process
}]

};
Ext.apply(config,conf || {});
Programs.superclass.constructor.call(this,config);
}

Ext.extend(Programs,Ext.Panel, {
process:function(btn){
this.getForm().submit({
method:'POST',
waitTitle:'Connecting....',
waitMsg :'Sending Data...',

success:function()
{
Ext.Message.alert('Status','Data Successfully Save...',
function(btn,text)
{
if(btn == 'ok')
{

}
});
},
failure:function(form,action)
{
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Error While Saving Data..',obj.errors.reason);
} else
{
Ext.Msg.alert('Warning!','An Unexpected Error occured while trying to Save Data');
}

}
})
}
});

//;


/*SetupView = function(conf){
config={
layout:'border',
region:'center',
defaults:{ bodyStyle:'padding:10x'},
items:[eduSystem]
};
Ext.apply(config,conf || {});
SetupView.superclass.constructor.call(this,config);
}
Ext.extend(SetupView,Ext.Panel);

var setUpView = new SetupView({});

help ....