Here's my layout page, followed by the tcnEditGrid.js ux xtype edit grid that is the problem Tab. I haven't changed tcnEditGrid.js.
SiteCentral.html:
/$top
Content-type: text/html
/$page
<html>
<head>
<title>Site Central</title>
<link rel="stylesheet" type="text/css" href="/cgidev/js/ExtJS/ext2/resources/css/ext-all.css" />
<script type="text/javascript" src="/cgidev/js/ExtJS/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/cgidev/js/ExtJS/ext2/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/cgidev/js/ExtJS/ext2/examples/examples.css" />
<script type="text/javascript" src="/cgidev/js/ExtJS/ext2/examples/examples.js"></script>
<script type="text/javascript" src="/cgidev/js/ExtJS/ext2/examples/grid/RowExpander.js"></script>
<script type="text/javascript">
/*global Ext, evbNameSpace */
// Ext.namespace('evbNameSpace.scmModule');
// var console = console || { log: Ext.log };
</script>
<script type="text/javascript" src="/cgidev/js/evb_combos.js"></script>
<!-- Everbrite pre-configured user-entension editables -->
<script type="text/javascript" src="/cgidev/js/ux_PromptField.js"></script>
<script type="text/javascript" src="/cgidev/js/ux_hPmtGrid.js"></script>
<script type="text/javascript" src="/cgidev/js/vmInqGrid.js"></script>
<script type="text/javascript" src="/cgidev/js/aroInqGrid.js"></script>
<script type="text/javascript" src="/cgidev/js/hInqGrid.js"></script>
<script type="text/javascript" src="/cgidev/js/thdEditPanel.js"></script>
<script type="text/javascript" src="/cgidev/js/tcnEditGrid.js"></script>
<script type="text/javascript" src="/cgidev/js/tcmEditGrid.js"></script>
<script type="text/javascript" src="/cgidev/js/ttmEditGrid.js"></script>
<script type="text/javascript" src="/cgidev/js/sxtEditGrid.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.Statistics {
background-image:url(/cgidev/js/ExtJS/ext2/examples/shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(/cgidev/js/ExtJS/ext2/examples/shared/icons/fam/folder_go.png);
}
#body .x-panel {
margin-bottom:20px;
}
.icon-grid {
background-image:url(/cgidev/js/ExtJS/ext2/examples/shared/icons/fam/grid.png) !important;
}
#button-grid .x-panel-body {
border:1px solid #99bbe8;
border-top:0 none;
}
.add {
background-image:url(/cgidev/js/ExtJS/ext2/examples/shared/icons/fam/add.gif) !important;
}
.remove {
background-image:url(/cgidev/js/ExtJS/ext2/examples/shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(/cgidev/js/ExtJS/ext2/examples/shared/icons/save.gif) !important;
}
.option {
background-image:url(/cgidev/js/ExtJS/ext2/examples/shared/icons/fam/cog_edit.png) !important;
}
.wrench {
background-image:url(/cgidev/js/ExtJS/ext2/examples/shared/icons/fam/folder_wrench.png) !important;
}
.close {
background-image:url(/cgidev/js/ExtJS/ext2/resources/images/slate/qtip/close.gif) !important;
}
.app {
background-image:url(/cgidev/js/ExtJS/ext2/examples/shared/icons/fam/application_go.png) !important;
}
.loading {
background-image:url(/cgidev/js/ExtJS/ext2/resources/images/default/tree/loading.gif) !important;
}
.done {
background-image:url(/cgidev/js/ExtJS/ext2/resources/images/default/grid/done.gif) !important;
}
.find {
background-image:url(/cgidev/js/ExtJS/img/find.png) !important;
}
.refresh {
background-image:url(/cgidev/js/ExtJS/examples/shared/icons/fam/table_refresh.png) !important;
}
.readonlycell {
background-color:#CCCCCC !important;
}
.x-form-field-wrap .evb-addtrigger-class {
background-image: url(/cgidev/images/add-trigger.gif);
cursor:pointer;
}
<!-- prompt field styles -->
p.cfg, p.header{
font-family: verdana,lucida,arial,helvetica,sans-serif;
}
pre {
font-size : 11px;
}
p.cfg {
font-size : 12px;
margin-left:10px;
margin-top:5px;
}
p.header {
font-size : 13px;
font-weight : bold;
}
p.cfg span{
font-weight : bold;
}
.images-view .x-window-body{
background: #ffffff;
color: #000000;
}
.images-view .thumb{
border:1px solid #dddddd;
padding: 0px;
height: 97px;
width: 95px;
}
.images-view .thumb-wrap table{
font: 11px Arial, Helvetica, sans-serif;
text-align: center;
}
.images-view .thumb-wrap{
float: left;
margin: 4px;
margin-right: 0;
padding: 5px;
cursor: pointer;
}
.images-view .x-view-over{
border:1px solid #cccccc;
background: #eeeeee;
padding: 4px;
}
.images-view .x-view-selected{
background: #ccddee;
border:1px solid #6699cc;
padding: 4px;
}
.images-view .x-view-selected .thumb{
border:1px solid #6699cc;
}
.images-view .loading-indicator {
font-size:11px;
background-image:url(/cgidev/js/ExtJS/ext2/resources/images/default/grid/loading.gif);
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
margin:10px;
}
</style>
<script type="text/javascript">
// reference local blank image
Ext.BLANK_IMAGE_URL = '/cgidev/js/ExtJS/ext2/resources/images/default/s.gif';
Ext.ux.MenuPanel = function(config) {
Ext.ux.MenuPanel.superclass.constructor.call(this, config);
if((typeof this.menu =='undefined') || this.menu == null)
throw 'you need to specify an instance of Menu in your cfg object';
this.menu.shadow = false;//We don't need shadow, do we?Besides, without this IE6 complain so...
}
Ext.extend(Ext.ux.MenuPanel, Ext.Panel, {
afterRender: function(){
Ext.ux.MenuPanel.superclass.afterRender.call(this);
var el = this.menu.getEl();
el.getShim();
el.hideShim();
this.body.appendChild(el);
el.clearPositioning('auto');
el.setWidth('100%');
el.applyStyles({
border: '0px'
});
el.show();
},
getMenu: function(){
return this.menu;
},
//private
beforeDestroy: function(){
Ext.ux.MenuPanel.superclass.beforeDestroy.call(this);
this.menu.destroy();
}
});
Ext.reg('menupanel', Ext.ux.MenuPanel);
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
// Save states, preferences in a cookie
var cp = new Ext.state.CookieProvider({
expires: new Date(new Date().getTime()+(1000*60*60*24*30)) //30 days
});
Ext.state.Manager.setProvider(cp);
var menu1 = new Ext.menu.Menu({
id: 'mainMenu',
items: [
{
text: 'A/R Inquiry',
iconCls:'nav',
handler: function(){
var w = Ext.getCmp('center-panel');
w.add({contentEl:'center_aropen',title:'A/R Inquiry',xtype: 'aroInqGrid',closable:true,split: true,autoScroll:true,enableTabScroll:true}).show();
}
},{
text: 'Customer Master',
iconCls:'nav',
handler: function(){
// var w = Ext.getCmp('center-panel');
// w.add({contentEl:'center_cusmst',title:'Customer Master',autoLoad: {url: 'cusmst', params: 'submit=RETRIEVE&process=INQUIRE&processtype=DETAIL&dbfile=CUSMST'},closable:true,split: true,autoScroll:true,enableTabScroll:true}).show();
// centerPanel.setActiveTab('center_cusmst');
// For now open Customer Master in current CGI design
var comno = Ext.get('COMNOfield').dom.value;
var cusno = Ext.get('CUSNOfield').dom.value;
var url = 'flexac?submit=RETRIEVE&dbfile=cusmst&process=EDIT&processType=DETAIL&dbfile=CUSMST&comnoi=' + comno + '&cusnoi=' + cusno;
window.open(url);
}
},{
text: 'Customer Master Inquiry',
iconCls:'nav',
handler: function(){
// For now open Customer Master in current CGI design
var comno = Ext.get('COMNOfield').dom.value;
var cusno = Ext.get('CUSNOfield').dom.value;
var url = 'ej_cusmst?limit=50&dir=ASC&comparison=eq&filter-string-company=' + comno + '&filter-string-customer=' + cusno;
window.open(url);
}
},{
text: 'Released Items',
iconCls:'nav',
handler: function(){
var w = Ext.getCmp('center-panel');
w.add({contentEl:'center_rlshdr',title:'Released Items',xtype: 'hInqGrid',closable:true,split: true,autoScroll:true,enableTabScroll:true}).show();
}
},{
text: 'DOCS',
iconCls:'nav',
handler: function(){
// For now open FSPO in current design
var site = Ext.get('SITIDkey').dom.value;
var url = 'http://corp-dm/cyberdocs/quickstart.asp?show=SEARCHACT:__FORMNAME=custSearch:STORE_NUM=' + site;
window.open(url);
}
},{
text: 'EQS',
iconCls:'nav',
handler: function(){
var w = Ext.getCmp('center-panel');
w.add({contentEl:'center_eqs',title:'E.Q.S.',closable:true,split: true,autoScroll:true,enableTabScroll:true}).show();
centerPanel.setActiveTab('center_eqs');
}
},{
text: 'FSPO',
iconCls:'nav',
handler: function(){
// For now open FSPO in current CGI design
var sitid = Ext.get('SITIDkey').dom.value;
var url = 'fspofldsv?submit=GO&shsitid=' + sitid;
window.open(url);
}
},{
text: 'Installers',
iconCls:'nav',
handler: function(){
// For now open Installers in current CGI design
var vendor = Ext.get('SITIDkey').dom.value;
var url = 'installer?vndnri=' + vendor;
window.open(url);
}
},{
text: 'PIF',
iconCls:'nav',
handler: function(){
// Open the PIF Extranet web site
var plnbr = Ext.get('PLNBRfield').dom.value;
var url = 'http://extranet.everbrite.com/project/list-projects.jsp?projectStatus=&revisionStatus=&report=PI&projectNumber=' + plnbr;
window.open(url);
}
},{
text: 'Quality',
iconCls:'nav',
handler: function(){
// Open the Quality Extranet web site
var sitid = Ext.get('SITIDkey').dom.value;
var url = 'http://extranet.everbrite.com/quality/index.jsp?sitid=' + sitid;
window.open(url);
}
}
]
});
var siteMenu = {
xtype: 'menupanel',
title: 'Site-related Applications',
collapsible:true,
menu: menu1
};
var inqMenus = new Ext.menu.Menu({
id: 'inqMenu',
items: [
{
text: 'Open/SNB Releases',
iconCls:'nav',
handler: function(){
var w = Ext.getCmp('center-panel');
// 'X' parm value lets ej_opnsnb know we're coming from SiteCentral
w.add({contentEl:'center_opnsnb',title:'Open Releases/SNB',autoLoad: {url: 'ej_opnsnb', params: 'rlsts=X' },closable:true,split: true,autoScroll:true,enableTabScroll:true}).show();
centerPanel.setActiveTab('center_opnsnb');
}
},{
text: 'Open Releases',
iconCls:'nav',
handler: function(){
var url = 'ej_opnsnb?rlsts=O&load1sttime=Y&filterstringactcd=' + Ext.get('ACTCDfield').dom.value;
window.open(url);
}
},{
text: 'SNB',
iconCls:'nav',
handler: function(){
var url = 'ej_opnsnb?rlsts=S&load1sttime=Y&filterstringactcd=' + Ext.get('ACTCDfield').dom.value;
window.open(url);
}
},{
text: 'SNB in Tab',
iconCls:'nav',
handler: function(){
var url = 'ej_opnsnb?rlsts=S';
window.open(url);
}
}]
});
var inqMenu = {
xtype: 'menupanel',
title: 'Inquiries',
collapsible:true,
menu: inqMenus
};
var centerPanel = new Ext.TabPanel({
region:'center',
id:'center-panel',
deferredRender:true,
activeTab:0,
enableTabScroll:true,
autoScroll:true,
defaults: {autoScroll:true},
items:[
SITHDRCreateForm,
{
contentEl:'sitcnt',
title: 'Contacts',
id: 'siteContacts',
split: true,
autoScroll:true,
xtype:'tcnEditGrid',
enableTabScroll:true
},{
contentEl:'sitcmt',
title: 'Comments',
id: 'siteComments',
split: true,
autoScroll:true,
xtype:'tcmEditGrid',
enableTabScroll:true
},{
contentEl:'sitext',
title: 'Critical Issues',
tabtip:'Enter your critical issue dates here',
split: true,
autoScroll:true,
xtype:'sxtEditGrid',
// autoLoad: {url: 'FLEXUI', params: 'SITID=' + Ext.get('SITID').dom.value + '&submit=retrieve&process=edit&processtype=detail&dbfile=SITEXT&ajaxcall=Y' },
enableTabScroll:true
},{
contentEl:'sititm',
title: 'Product',
id: 'siteProduct',
split: true,
autoScroll:true,
xtype: 'ttmEditGrid',
enableTabScroll:true
}
]
})
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
hidden:true,
height:32
}),{
region:'west',
id:'west-panel',
title:'Site Central',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [
siteMenu
, inqMenu
,{
title:'Reports',
border:false,
autoLoad: {url: '/cgidev/nav_as400reports.htm'}
},{
title:'Extranet',
border:false,
autoLoad: {url: '/cgidev/nav_extranet.htm'}
},{
title:'Miscellaneous',
border:false,
autoLoad: {url: '/cgidev/nav_misc.htm'}
}]
},
centerPanel
]
});
Ext.get('SITIDkey').dom.focus('', 10);
// Ext.getCmp('SITIDkey').focus('', 10);
// Ext.getEl('SITIDkey').setFocus('', 10);
// keyTrigger.onTriggerClick = SearchSitHdr;
keyTrigger.onTriggerClick = RetrieveRecord;
keyTrigger.applyToMarkup('SITIDkey');
// Prompt for valid Installers
VndnrTrigger.onTriggerClick = VenNamSelectUI;
VndnrTrigger.applyToMarkup('SITINfield');
// VndnrTrigger2.onTriggerClick = VenNamSelectUI;
// VndnrTrigger2.applyToMarkup('SITINfield');
// Rtv rcd when inputted key changes
// Ext.get('SITIDkey').on('blur', function(fld){
// RetrieveRecord();
// });
// end of onReady
});
</script>
</head>
<body>
<input type="hidden" name="usrpf" id="usrpf" value="/%usrpf%/">
<input type="hidden" name="divid" id="divid" value="/%divid%/">
<div id="sithdr">
<div id="SITHDRdiv"><input type="hidden" id="SITID" size="20" value="" /></div>
</div>
<div id="sitcmt" class="x-hide-display">
<div id="SITCMTdiv"></div>
</div>
<div id="sitcnt" class="x-hide-display">
<div id="SITCNTdiv"></div>
</div>
<div id="sitext" class="x-hide-display">
</div>
<div id="sititm" class="x-hide-display">
<div id="SITITMdiv"></div>
</div>
<div id="center_opnsnb" class="x-hide-display">
<p><i>The Flex Inquiry here</i></p>
</div id='opnsnb_div'> </div>
</div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="west" class="x-hide-display">
<p>Choose your menu option here</p>
</div>
<div id="north" class="x-hide-display"></div>
<!-- thd combo boxes -->
<select name="SISTSArray" id="SISTSArray" style="display:none;">
<option value='A'>Active</option>
<option value='H'>Hold</option>
<option value='I'>Invoice</option>
<option value='P'>Prospect</option>
<option value='Q'>Quote</option>
<option value='M'>Maintenance</option>
<option value='C'>Close</option>
</select>
<select name="STRSTArray" id="STRSTArray" style="display:none;">
<option value='NEW'>New</option>
<option value='NO'>No</option>
<option value='RBD'>Rebuild</option>
<option value='RIM'>Reimage</option>
<option value='RMD'>Remodel</option>
<option value='RLC'>Relocation</option>
<option value='OIL'>Oil Alliance</option>
<option value='WLM'>WalMart</option>
</select>
<select name="SCNTTArray" id="SCNTTArray" style="display:none;">
<option value='C1'>Site Contact</option>
<option value='CN'>Contact Name</option>
<option value='C2'>Site Contact 2</option>
<option value='C3'>Site Contact 3</option>
<option value='LN'>Landlord</option>
<option value='EA'>Email</option>
<option value='IN'>Installer</option>
<option value='AN'>Architect</option>
</select>
</body>
</html>
tcnEditGrid.js:
var tcnDataStore; // this will be our datastore
var tcnColumnModel; // this will be our columnmodel
// var tcnEditGrid;
var tcnSelModel = new Ext.grid.RowSelectionModel({singleSelect:false});
// Adding a new entry/row:
var tcnCreateForm;
var tcnCreateWindow;
var key;
var dt = new Date();
// e.) Define the flds:
var SITIDfield;
var SCNTSfield;
var SCNTTfield;
var SITCXfield;
// Context menu
var tcnSelectedRow;
var tcnEditGrid = new Ext.extend(Ext.grid.EditorGridPanel, {
//begin template methods
initComponent: function() {
// a.) Data store:
tcnDataStore = new Ext.data.Store({
id: 'tcnDataStore',
proxy: new Ext.data.HttpProxy({
url: 'SITCNT', // File to connect to
method: 'POST'
}),
baseParams:{
submit: '',
process: 'EDIT',
processType: 'LIST',
SITID:' '
},
// b.) Reader:
reader: new Ext.data.JsonReader({ // we tell the datastore where to get his data from
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{ name : 'SITID', type: 'string' , mapping: 'SITID' }
, { name : 'SCNTS', type: 'int' , mapping: 'SCNTS' }
, { name : 'SCNTT', type: '' , mapping: 'SCNTT' }
, { name : 'SITCX', type: 'string' , mapping: 'SITCX' }
]) ,
sortInfo:{ field:'SCNTS', direction:"ASC" }
});
// b.) Column model: (Plex: write a cmField section for each field in the grid, and a variable for each fld attribute)
tcnColumnModel = new Ext.grid.ColumnModel(
[
{
header: 'Site',
readOnly: true,
dataIndex: 'SITID',
width: 120,
hidden: true,
renderer: function(value,cell) {
cell.css = "readonlycell";
return value;
}
} , {
header: 'Seq#',
readOnly: true,
dataIndex: 'SCNTS',
width: 102,
hidden: true,
renderer: function(value,cell) {
cell.css = "readonlycell";
return value;
}
}, {
header: 'Type',
readOnly: false,
dataIndex: 'SCNTT',
width: 140,
hidden: false
, editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'SCNTTArray',
lazyRender:true,
listClass: 'x-combo-list-small'
})
} , {
header: 'Contact Info',
readOnly: false,
dataIndex: 'SITCX',
width: 300,
hidden: false
, editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 50,
maskRe: /([a-zA-Z0-9\s]+)$/ // alphanumeric + spaces allowed
})
}
]
);
tcnColumnModel.defaultSortable=true;
// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Contact = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{ name : 'SITID', type: 'string' }
, { name : 'SCNTS', type: 'int' }
, { name : 'SCNTT' }
, { name : 'SITCX', type: 'string' }
// {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'}
]);
Ext.apply(this,{
id: 'tcnEditGrid',
store: tcnDataStore, // the datastore is defined here
cm: tcnColumnModel, // the columnmodel is defined here
clicksToEdit:1,
stripeRows: true,
autoWidth:true,
loadMask: true,
border:false,
frame:false,
viewConfig:{emptyText:'No rows to display'},
selModel: tcnSelModel,
// c.) toolbar items
tbar: [
{
text: 'Add Contacts', tooltip:'Add new Contacts', handler: this.displayFormWindow.createDelegate(this),
iconCls: 'add'
}
, '-', {
text: 'Delete selected Contacts', tooltip:'Delete selected row(s)', handler: this.confirmDeleteSITCNT.createDelegate(this),
iconCls: 'remove'
}
]
}); // end of apply
tcnEditGrid.superclass.initComponent.apply(this,arguments);
// The last thing we need is an actionlistener that will call the ontcnEditGridContextMenu function when we right click:
this.addListener('rowcontextmenu', this.ontcnEditGridContextMenu);
// Ok, now that the save function is ready, we need to attach it to the event where the user // edits the cell. This is done at the very end of our javascript file :
this.on('afteredit', this.saveTheSITCNT);
} // end of function initComponent
, // template method
onRender: function() {
// before parent code
//MyExtendedClass.superclass.onRender.apply(this, arguments);
tcnEditGrid.superclass.onRender.apply(this, arguments);
// The Comments tab has been clicked; redner the grid and load the Site Id's comments
key = Ext.get('SITIDkey').dom.value;
tcnDataStore.baseParams = {
submit:'RETRIEVE',
SITIDi: key
};
this.store.load();
} // end of function onRender
, // template method
initEvents: function() {
tcnEditGrid.superclass.initEvents.apply(this, arguments);
// f.) We need to write the code that describes the behavior of those fields: (within the onReady function):
SITIDfield = new Ext.form.TextField({
id: 'SITIDfield',
fieldLabel: 'Site',
maxLength: 20,
allowBlank: false,
width:120,
readOnly: false,
disabled: true,
hidden:false,
hideLabel:false,
maskRe: /([a-zA-Z0-9\s]+)$/
});
SCNTSfield = new Ext.form.NumberField({
id: 'SCNTSfield',
fieldLabel: 'Seq#',
maxLength: 17,
allowBlank: false,
width:102,
readOnly: true,
hidden:true,
hideLabel:true
});
SCNTTfield = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ['key', 'label'],
data: [
['C1','Site Contact'],['CN','Contact Name'],['C2','Site Contact 2'],['C3','Site Contact 3'],['LN','Landlord'],['EA','Email'],['IN','Installer'],['AN','Architect']
]
}),
id:'SCNTTfield',
fieldLabel: 'Type',
displayField:'label',
valueField:'key',
mode: 'local',
typeAhead: true,
triggerAction: 'all',
selectOnFocus:true,
forceSelection:true
});
SITCXfield = new Ext.form.TextField({
id: 'SITCXfield',
fieldLabel: 'Contact Info',
maxLength: 50,
allowBlank: false,
width:300,
readOnly: false,
hidden:false,
hideLabel:false,
maskRe: /([a-zA-Z0-9.@\s]+)$/
});
// g.) Creating the form (to add a new rcd):
tcnCreateForm = new Ext.FormPanel({
labelAlign: 'left',
bodyStyle:'padding:5px',
width: 500,
height: 175,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:1.0,
layout: 'form',
border:false,
items: [ SITIDfield, SCNTSfield, SCNTTfield, SITCXfield ]
},{
columnWidth:0.0,
layout: 'form',
border:false
}]
}
],
buttons: [{
text: 'Save and Close',
handler: this.createTheSITCNT
},{
text: 'Cancel',
handler: function(){
// because of the global vars, we can only instantiate one window... so let's just hide it.
tcnCreateWindow.hide();
}
}]
});
tcnCreateWindow = new Ext.Window({
id: 'tcnCreateWindow',
title: 'Add New Contact',
closable:true,
width: 500,
height: 175,
plain:true,
layout: 'fit',
modal:true,
items: tcnCreateForm
});
// Context menu defined (print removed):
SITCNTContextMenu = new Ext.menu.Menu({
id: 'tcnEditGridContextMenu',
items: [
{ text: 'Delete this Contacts', handler: this.deleteSITCNTContextMenu.createDelegate(this) }
]
});
} // end of function initEvents
// template method
,afterRender: function(){
//call parent
tcnEditGrid.superclass.afterRender.apply(this, arguments);
//after rendering, we can set a value if defined in the config
} // end of function afterRender
// template method
,beforeDestroy: function(){
} // end of function beforeDestroy
// template method
,onDestroy: function(){
} // end of function onDestroy
//end template methods
//-----------------------------------------------------------------------------
// Editing:
// d.) Save each cell as it changes (the entire row is sent):
,
saveTheSITCNT: function(oGrid_event){
Ext.Ajax.request({
waitMsg: 'Please wait...',
url: 'SITCNT',
params: {
submit: 'UPDATE',
process: 'EDIT',
processType: 'DETAIL',
SITID: oGrid_event.record.data.SITID,
SCNTS: oGrid_event.record.data.SCNTS,
SCNTT: oGrid_event.record.data.SCNTT,
SITCX: oGrid_event.record.data.SITCX
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
tcnDataStore.commitChanges(); // changes successful, rmv red triangles
tcnDataStore.reload(); // reload our datastore.
break;
default:
Ext.MessageBox.alert('Error','Save not successful');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('Error','could not connect to the database. please try again');
}
});
}
// Fncs to work with the form:
,
// h.) reset the Form before opening it
resetSITCNTForm: function (){
SITIDfield.setValue( Ext.get('SITIDkey').dom.value );
var gridRows = tcnEditGrid.colModel;
SCNTSkey = 0;
// console.info('Before init SCNTSkey =',SCNTSkey);
for(i=0; i<this.getStore().getCount(); i++){
var record = this.getStore().getAt(i); // Get the record
SCNTSkey = record.get('SCNTS'); // Get the fields data
}
var encoded_SCNTSkey = Ext.encode(SCNTSkey + 10 );
// console.info('After init SCNTSkey =', encoded_SCNTSkey );
SCNTSfield.setValue(encoded_SCNTSkey);
SCNTTfield.setValue('');
SITCXfield.setValue('');
}
,
// display or bring forth the form
displayFormWindow: function (){
if(!tcnCreateWindow.isVisible()){
this.resetSITCNTForm();
tcnCreateWindow.show();
} else {
tcnCreateWindow.toFront();
}
}
// i.) Implement a save method:
,
createTheSITCNT: function (){
if( SCNTTfield.isValid() && SITCXfield.isValid() ){
Ext.Ajax.request({
waitMsg: 'Please wait...',
url: 'SITCNT',
params: {
submit: 'ADD',
process: 'EDIT',
processType: 'DETAIL',
SITID: SITIDkey.getValue(),
SCNTS: SCNTSfield.getValue(),
SCNTT: SCNTTfield.getValue(),
SITCX: SITCXfield.getValue(),
debuggvar: 'N'
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
Ext.example.msg('Confirmation', 'Contacts created successfully' );
tcnDataStore.reload();
tcnCreateWindow.hide();
break;
default:
Ext.MessageBox.alert('Warning','Could not create the Contacts');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('Error','could not connect to the database; try again');
}
});
} else {
Ext.MessageBox.alert('Warning', 'Errors exist on your form');
}
}
, // Confirm delete:
confirmDeleteSITCNT: function (){
if(tcnSelModel.getCount() == 1) // only one Contacts is selected here
{
Ext.MessageBox.confirm('Confirmation','Delete this Contacts?', this.deleteSITCNT);
} else if(tcnSelModel.getCount() > 1){
Ext.MessageBox.confirm('Confirmation','Delete the ' + tcnSelModel.getCount() + ' selected Contacts?', this.deleteSITCNT);
} else {
Ext.msg('Error','Please select at least 1 Contacts to delete');
}
}
,
// The entire delete fnc:
deleteSITCNT: function (btn){
if(btn=='yes'){
// Loop through looking for multiple row(s) selected for delete:
var selections = tcnSelModel.getSelections();
var SITIDAry = [];
var SCNTSAry = [];
for(i = 0; i< tcnSelModel.getCount(); i++){
SITIDAry.push(selections[i].json.SITID);
SCNTSAry.push(selections[i].json.SCNTS);
}
var encoded_SITID_array = Ext.encode(SITIDAry);
var encoded_SCNTS_array = Ext.encode(SCNTSAry);
Ext.Ajax.request({
waitMsg: 'Please Wait',
url: 'SITCNT',
params: {
submit: 'DELETE',
process: 'EDIT',
processType: 'DETAIL',
SITIDAry: encoded_SITID_array,
SCNTSAry: encoded_SCNTS_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: // Success : simply reload
Ext.example.msg('Confirmation', 'Contact(s) deleted successfully' );
tcnDataStore.reload();
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}
, // The first one will be called everytime we right-click on the grid :
ontcnEditGridContextMenu: function (grid, rowIndex, e) {
e.stopEvent();
var coords = e.getXY();
SITCNTContextMenu.rowRecord = grid.store.getAt(rowIndex);
grid.selModel.selectRow(rowIndex);
tcnSelectedRow=rowIndex;
SITCNTContextMenu.showAt([coords[0], coords[1]]);
}
,
deleteSITCNTContextMenu: function (){
this.confirmDeleteSITCNT();
}
,
viewSITCNTContextMenu: function (){
// this.viewDetailsSITCNT();
}
}); // End EditorGridPanel
Ext.ComponentMgr.registerType('tcnEditGrid', tcnEditGrid);
Thanks!