PDA

View Full Version : Function call Correction



DesiTesh
10 Mar 2010, 10:49 AM
hi,

Instead of describing I made simple, just save below code as .html and open in browser. Clicking grid will display details data in detail panel. Click on top left 'Add Record' will display form. But now if you click again 'Add Record' nothing happens. If you click on grid nothing shows.



<html>
<head>
<!-- http://examples.extjs.eu/ext -->
<link rel="stylesheet" type="text/css" href="http://examples.extjs.eu/ext/resources/css/ext-all.css" />
<script src="http://examples.extjs.eu/ext/adapter/ext/ext-base.js">
</script>
<script src="http://examples.extjs.eu/ext/ext-all-debug.js">
</script>
<script>
//javascript
Ext.BLANK_IMAGE_URL = 'http://examples.extjs.eu/ext/resources/images/default/s.gif';

var subtabs, addCase, mainPanel, dtlFormPanelDefault, addcasefunction, dtlFormPanel;

Ext.onReady(function(){
Ext.QuickTips.init();

var jSource='[{"atmpvc":"","ID":3,"createdByUser":"agent1","createdOnDt":1265789821000,"endPort":0,"endTime":1414811160000,"id":3,"ipMask":0,"isServer":-1,"macAddress":"","macAddressDirection":-1,"mplsInnerLabel":"","mplsOuterLabel":"","postRuleMask":"","protocolTypeCd":"ALL","routeDesc":"","startPort":0,"startTime":1293956040000,"statusInd":1,"targetName":"target3_11","targetTypeCd":11,"targetValue1":"jerry","targetValue2":null,"userAttributeMask":"","id":3,"ID":3,"targetName":"target3_11","targetTypeCd":11,"protocolTypeCd":"ALL","targetValue1":"jerry","targetValue2":null,"isServer":-1,"startPort":0,"endPort":0,"ipMask":0,"userAttributeMask":"","postRuleMask":"","mplsInnerLabel":"","mplsOuterLabel":"","macAddressDirection":-1,"macAddress":"","startTime":1293956040000,"endTime":1414811160000,"statusInd":1,"createdOnDt":1265789821000,"createdByUser":"agent1","routeDesc":"","itagroup":"South Network","assignedTo":"Agent5","postrule":"MAC","targetType":"USER_NAME","comment":"Comment for Target 3_11","atmpvc":""},{"atmpvc":"","ID":3,"createdByUser":"agent1","createdOnDt":1265789548000,"endPort":0,"endTime":1414811160000,"id":2,"ipMask":0,"isServer":-1,"macAddress":"","macAddressDirection":-1,"mplsInnerLabel":"","mplsOuterLabel":"","postRuleMask":"","protocolTypeCd":"ALL","routeDesc":"","startPort":0,"startTime":1265789580000,"statusInd":2,"targetName":"target2_11","targetTypeCd":8,"targetValue1":"[email protected]","targetValue2":null,"userAttributeMask":"","id":2,"ID":3,"targetName":"target2_11","targetTypeCd":8,"protocolTypeCd":"ALL","targetValue1":"[email protected]","targetValue2":null,"isServer":-1,"startPort":0,"endPort":0,"ipMask":0,"userAttributeMask":"","postRuleMask":"","mplsInnerLabel":"","mplsOuterLabel":"","macAddressDirection":-1,"macAddress":"","startTime":1265789580000,"endTime":1414811160000,"statusInd":2,"createdOnDt":1265789548000,"createdByUser":"agent1","routeDesc":"","atmpvc":""}]';

var myReader=new Ext.data.JsonReader(
{

},[
{name: 'ID'},
{name: 'createdByUser'},
{name: 'targetName'},
{name: 'targetValue1'},
{name: 'statusInd'},
{name: 'itagroup'},
{name: 'assignedTo'},
{name: 'comment'},
{name: 'postrule'},
{name: 'targetType'},
{name: 'protocolTypeCd'},
{name: 'startDate', mapping:'startTime', type: 'date', dateFormat: 'time'},
{name: 'startTime', mapping:'startTime', type: 'date', dateFormat: 'time'},
{name: 'endDate', mapping:'endTime', type: 'date', dateFormat: 'time'},
{name: 'endTime', mapping:'endTime', type: 'date', dateFormat: 'time'}
]
)

var store=new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(jSource), reader: myReader});
store.loadData(Ext.util.JSON.decode(jSource));
var store = new Ext.data.Store({reader: myReader});
store.loadData(Ext.util.JSON.decode(jSource));


navPanel = new Ext.Panel({
title: 'Menus Button',
region: 'west',
margins: '20 0 5 5',
cmargins: '0 5 0 0',
collapsible: true,
height: 300,
width: 225,
minSize: 100,
maxSize: 500,
autoScroll: true,
border: true,
split:true,
//items: [accordion]
html:'menu Data Here'
});

var grid = new Ext.grid.GridPanel({
title: 'All Records',
region: 'center',
store: store,
columns: [

{header: "Name", width: 20, sortable: true, dataIndex: 'createdByUser'},
{header: "ID", width: 20, sortable: true, dataIndex: 'ID'},
{header: "Status", width: 20, sortable: true, dataIndex: 'statusInd'},
{header: "Type", width: 20, sortable: true, dataIndex: 'targetName'},
{header: "Caputred", width: 30, sortable: true, dataIndex: 'targetValue1'}],
viewConfig: { forceFit: true },

listeners: {
viewready: function(g) {
g.getSelectionModel().selectRow(0);
}},

sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
dtlFormPanel.expand();
Ext.getCmp("dtlFormPanel").getForm().loadRecord(rec);
}
}
})

});



// Calendar Date Validation Script
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);

if(!date){
return;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = Ext.getCmp(field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = Ext.getCmp(field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
}
});


dtlFormPanel = new Ext.FormPanel({
id: 'dtlFormPanel',
title: 'Records Details',
region: 'south',
height: 250,
width:400,
collapsible: true,
bodyStyle: 'padding-bottom:5px;',
autoScroll: true,
layout: "column",
html:'<br>',
items:
[{
border: false,
width:850,

items:[{
style:'padding:8',
border: false,
layout: 'form',
items: [{
layout:'column',
border: false,
// width:800,
items:[{
columnWidth:.3,
border: false,
bodyStyle: 'padding-left:15px;',
layout: 'form',

items: [{
xtype:'textfield',
fieldLabel: 'Target Name',
name: 'targetName'
}, {
xtype:'combo',
width:130,
fieldLabel: 'Target Type',
typeAhed: false,
name: 'targetType',
triggerAction: 'all',
store:['IP','IP_RANGE','RADIUS_NAME','RADIUS_ID','RADIUS_ID_PORT','VOIP','DHCP_MAC','DHCP_AGENT','EMAIL_ADDR','EMAIL_LOGIN','USER_NAME','URI','USER_GROUP','KEYWORD','PROTOCOL','APPLIC']
}, {
xtype:'combo',
width:130,
fieldLabel: 'Protocol (s)',
typeAhed: false,
name:'protocolTypeCd',
triggerAction: 'all',
store:[ ['IP','IP'],['ICMP','ICMP'],['IGMP','IGMP'],['TCP','TCP'],['UDP','UDP'],['ESP','ESP'],['AH','AH'],['AIM','AIM'],['IRC','IRC'],['SIP','SIP'],['MSN','MSN'],['XMPP','XMPP'],['YAHOO IM','YAHOO IM'],['SMTP','SMTP'],['IMAP','IMAP'],['POP3','POP3'],['GMAIL','GMAIL'],['YAHOO MAIL','YAHOO MAIL'],['GAWAB','GAWAB'],['HOTMAIL','HOTMAIL'],['LIVE HOTMAIL','LIVE HOTMAIL'],['H.323','H.323'],['MGCP','MGCP'],['IAX2','IAX2'],['HTTP','HTTP'],['FTP','FTP'],['TELNET','TELNET'],['ALL','ALL']]
}, {
xtype:'combo',
width:130,
fieldLabel: 'Post Rule',
typeAhead : false,
name: 'postrule',
triggerAction: 'all',
store : ['MPLS','MPLS VPN','ATM PVC','MAC', 'NONE' ]
/*xtype:'combo',
width:130,
fieldLabel: 'Post Rule',
typeAhed: false,
name:'postrule',
id:'postrule',
triggerAction: 'all',
strore:['MPLS', 'MPLS VPN'] */
}]
},{
columnWidth:.3,
border: false,
bodyStyle: 'padding-left:15px;',
layout: 'form',
items: [{
xtype:'combo',
width:130,
fieldLabel: 'ITA Group(s)',
typeAhead : false,
editable: false,
triggerAction: 'all',
name: 'itagroup',
store: ['North Network','South Network', 'East Network', 'West Network']
/*store : [ [ '1', 'North Network' ],
[ '2', 'South Network' ],
[ '3', 'East Network' ],
[ '4', 'West Network' ]] */
},
{
xtype:'combo',
width:130,
fieldLabel: 'Assigned to Monitor',
typeAhead : false,
name: 'assignedTo',
triggerAction: 'all',
store : ['Supervisor1','Supervisor2','Supervisor3','Agent5' ]
}, {
width:130,
xtype:'textarea',
fieldLabel: 'Comments',
name:'comment'
}]
},{
columnWidth:.3,
border: false,
bodyStyle: 'padding-left:15px;',
layout: 'form',
defaultType: 'datefield',
items: [{
width:90,
fieldLabel: 'Start Date',
name: 'startDate',
id: 'startDate',
vtype: 'daterange',
format:'m/d/y',
endDateField: 'endDate' // id of the end date field
},
new Ext.form.TimeField({
width:90,
fieldLabel: 'Start Time',
name: 'startTime'
//format: 'time',
//minValue: '8:00am',
//smaxValue: '6:00pm'
}),
{
width:90,
fieldLabel: 'End Date',
name: 'endDate',
id: 'endDate',
format:'m/d/y',
vtype: 'daterange',
startDateField: 'startDate' // id of the start date field
},
new Ext.form.TimeField({
width:90,
fieldLabel: 'End Time',
name: 'endTime'
})
]
}]
}]

}],
buttons: [{
text:'Update',
type: 'submit',
handler: function(){
dtlFormPanel.getForm().submit({
url: 'targeting.html',
method: 'POST',
waitMsg: 'Updating form...',
success: function(form, action){
//if (testWin) { testWin.hide(); }
Ext.Msg.show({
itle:'Success'
,msg:'Form submitted successfully'
,modal:true
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
});
},
failure: function(form, action){
//Ext.Msg.show({ title:'Action Result', msg: action.result.errors.message,
//buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR, minWidth: 350 });
alert("failure");
}
});

}


},{
text: 'Cancel'
}]

}]

});

//Add Case
addCase = new Ext.Panel({
id: 'addCasePanel',
border:false,
//layout:'card',
//title: 'Add Case',
region: 'south',
//height: 250,
//collapsible: true,
//bodyStyle: 'padding-bottom:15px;',
//autoScroll: true,
layout: "column",
html:'<br>',
items:
[{
border: false,
width:850,
layout:'column',
border: false,
items:[{
columnWidth:.3,
border: false,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Case Name',
name: 'case',
value:'enter name'
}]
},{
columnWidth:.3,
border: false,
layout: 'form',
defaultType: 'datefield',
items: [{
fieldLabel: 'Start Date',
width:90,
name: 'startdt',
id: 'startdt',
vtype: 'daterange',
endDateField: 'enddt' // id of the end date field
},

new Ext.form.TimeField({
width:90,
fieldLabel: 'Start Time',
name: 'starttime',
minValue: '8:00am',
maxValue: '6:00pm'
}),
{
fieldLabel: 'End Date',
width:90,
name: 'enddt',
id: 'enddt',
vtype: 'daterange',
startDateField: 'startdt' // id of the start date field
},
new Ext.form.TimeField({
width:90,
fieldLabel: 'End Time',
name: 'endtime',
minValue: '8:00am',
maxValue: '6:00pm'
})
]
},{
columnWidth:.3,
border: false,
layout: 'form',

items: [{
xtype: "textarea",
id: 'comment',
name: 'comment',
fieldLabel: "Comments",
width:120,
height:110
}]




}],
buttons: [{
text:'Add',
type: 'submit'
},
{
text:'Cancel'
}]
}]
});


addcasefunction = function(){
var center = Ext.getCmp('dtlFormPanel');


//center.remove('dtlFormPanelDefault', false);
center.items.each(function(item, i, len){
center.remove(item, false)
item.hide()
})
//dtlFormPanel.hide();
center.add('addCasePanel');
//center.getLayout().setActiveItem('addCasePanel');
center.doLayout();

//var abc = Ext.getCmp('addCase');
//var cen = Ext.getCmp(addCase);
//dtlFormPanelDefault = addCase();
//center.getLayout().setActiveItem('addCase');
//center.remove('dtlFormPanel', false); //no destruction
//panCenterParent.remove(panCenterChild); //just trash that one
//dtlFormPanel.add(addCase);
//center.replace('addCase');
//center.doLayout();

}
var showcases = function()
{
var center = Ext.getCmp('dtlFormPanel');
center.removeAll('dtlFormPanelDefault');
center.add('dtlFormPanel');
//center.getLayout().setActiveItem('addCasePanel');
center.doLayout();
}

subtabs = {
id: 'target-subtabs',
region: 'north', // this is what makes this panel into a region within the containing layout
xtype:'toolbar',
height:25,
split: false,
bodyStyle: 'background:#566473;',
items:[{
xtype:'tbspacer'
},{
xtype:'tbbutton',
text:'Add Record',
handler:addcasefunction
},'-',{
xtype:'tbbutton',
text:'Show Archives',
handler: addcasefunction
},{
xtype:'tbfill'
}]


};

dtlFormPanelDefault = {
layout:'card',
id: 'dtlFormPanelDefault',
title: 'Case/Target Details',
region: 'south',
height: 250,
width:400,
collapsible: true,
bodyStyle: 'padding-bottom:5px;',
autoScroll: true,
html:'Please select the row'
}

mainPanel = new Ext.Panel({
layout: 'border',
id:'changeme',
collapsible: false,
region: 'center',
border: false,
split: true,
margins:'20 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
items: [grid, dtlFormPanel]
});
var container = new Ext.Viewport({
layout: 'border',
defaults: {
split: true
// bodyStyle: 'padding:5px',
},
margins: '20 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
id: 'layout-browser',
items: [subtabs,navPanel,mainPanel]
});
});
</script>
</head>
<body>
<div id="targetPanel">
</div>
</body>
</html>

I need help if I click 'Add Record' or 'Show Archives' any # of times it should show the form, but now its only shows one time. Next time you click again its disappears. Also if you can help me write function onclick grid to show back grid details.

Appreciate your help.