PDA

View Full Version : [SOLVED] Scope issue on EXTEND...



jasondeegan
30 Sep 2009, 1:45 PM
I'm using EXTEND functionality to create a new type of grouping view. When the grouping view is clicked I figure out where in the group header it was clicked. I then want to reference a function from within the Ext.listMgmt.aEES2 function (the genData function that gives me a new record).

Any help would be greatly appreciated, I think it's a scope problem, but this is a pretty complex issue...at least for me.



Ext.listMgmt = function(){
var msgCt;
function createBox(t, s){
return ['<div class="msg">',
'<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
'<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
'<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
'</div>'].join('');
} return {
msg : function(title, format){
if(!msgCt){
msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
}
msgCt.alignTo(document, 't-t');
var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
m.slideIn('t').pause(1).ghost("t", {remove:true});
},

aEES2: function( subID ){
var conna = new Ext.data.Connection();
var carriersStore = new Ext.data.SimpleStore({
fields: ['carrierValue', 'carrierDisplay'],
data : Ext.listMgmtCarrier.options
});

Ext.form.Field.prototype.msgTarget = 'under';
var fsf = new Ext.ux.OrderedFormPanel({
labelWidth: 75, url:'save-form.php', bodyStyle:'padding:5px 5px 0; border-bottom:0px;', width:350, height:30, id:'fsf', region:'north',
items: [{
xtype:'textfield', width:220, name:'contactName', id:'contactName', fieldLabel: 'Name',
listeners: {
'change' : function(){
Ext.getCmp( 'anewSubWindow' ).setTitle( Ext.getCmp( 'contactName' ).getValue() );
}
}
}]
});
var contactDetailRecord = Ext.data.Record.create([
{name: 'category'}, {name: 'v'}, {name: 's'}, {name: 'phone'}, {name: 'i'}, {name: 'vid'}
]);
var contactDetailStore = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({}, contactDetailRecord ),
url: '/rd/secure/scripts/contactDataGridFakeData.json',
sortInfo:{field: 'v', direction: "ASC"},
groupField:'category',
autoLoad:true
});
var genData = function(){
var e = new contactDetailRecord({
category: 'Completed',
v: 'new@exttest.com',
s: '12',
phone: '50000'
});
contactDetailStore.insert(0, e);
contactDetailGrid.getView().refresh();
} // THIS IS THE FUNCTION I WANT TO CALL....
var contactDetailGrid = new Ext.grid.EditorGridPanel({
store: contactDetailStore,
columns: [
{header: "category", id:'Category', width: 100, sortable: true, dataIndex: 'category', hidden:true },
{header: "Vendor", id:'v', width: 90, sortable: true, dataIndex: 'v' },
{header: "Store", width: 50, sortable: true, dataIndex: 's' },
{header: "Phone", width: 80, sortable: true, dataIndex: 'phone', editor: new Ext.form.TextField({ allowBlank: false }) },
{header: "Call", id:'bpCol', width: 25, resizable:true, sortable: true, dataIndex: 'i' , css: 'padding-left:0px; margin-left:0px; cursor: pointer; cursor: hand;' },
{header: "Id", width: 5, sortable: true, dataIndex: 'vid', hidden:true }
],
fill: true, region:'center', width:350, clicksToEdit:1, autoHeight:true, stripeRows: true, bodyStyle:'background-color:transparent; border-top:0px;', hideHeaders:true, ctCls: 'contactDetails',
view: new Ext.ux.noCollapseGroupingView({
forceFit:true,
groupTextTpl: '<table cellpadding=0 cellspacing=0 border=0 width=100%><tr><td style="width:99%;">{[ values.rs[0].data["category"] ]} </td><td style="width:24px; text-align:right;" class="clickGrp"><img src="/rd/images/icons/plus.png"></td></tr></table>',
listeners : {
click: function(){
alert( 'this is big' );
}
}
}),
listeners: {
afteredit: function( oGrid_event ) {
genData();
conna.request({
url: '/dr/dao/dao.php',
method: 'GET',
params: {"action":"updateVendorData", "ph": oGrid_event.record.data.phone, "vid": oGrid_event.record.data.vid },
success: function( responseObject ) {
o = Ext.decode( responseObject.responseText );
alert( o.msg );
},
failure: function( responseObject ) {
o = Ext.decode( responseObject.responseText );
alert( o.msg );
}
});
contactDetailStore.reload();
},
cellclick: function(grid, rowIndex, colIndex) {
if (colIndex == 4) {
var rec = grid.store.getAt(rowIndex);
//rec.set('value', colIndex);
var ph = rec.get( 'phone' );
var compid = rec.get( 'vid' );
var bp = rec.get( 'bpCol' );
if( bp != '' ){
runner.start( pollTask );
conna.request({
url: '/dr/dao/dao.php',
method: 'GET',
params: {"action":"test", "ph": ph, "compid": compid },
success: function( responseObject ) {
o = Ext.decode( responseObject.responseText );
alert( o.msg );
},
failure: function( responseObject ) {
o = Ext.decode( responseObject.responseText );
alert( o.msg );
}
});

}
}
}
}
});
contactDetailStore.load( );

Ext.Ajax.request({
method : 'POST',
url : '/rd/secure/dao/dao.php',
params : { 'action':'getSubscriberDataJSON', 'subId':subID },
success : function( response ){
o = Ext.decode( response.responseText );
for( var r = 0 ; r < o.totalphones ; r++ ){
// addField( 'phones', o.phones[ r ].phone )
}
for( var s = 0 ; s < o.totalemails ; s++ ){
// addField( 'emails', o.emails[ s ].email )
}
for( var t = 0 ; t < o.totaltexts ; t++ ){
// addField( 'texts', o.texts[ t ].text )
}
Ext.getCmp( 'contactName' ).setValue( o.contact );
var anewSubWin = Ext.getCmp('anewSubWindow');
if (!anewSubWin) {
anewSubWin = new Ext.Window({
id: 'anewSubWindow', title:'List Management', modal:true, width:410, height:350, y:80, plain:true, closable: false, bodyStyle:'padding:5px;', buttonAlign:'center', layout:'border', items: [ fsf, contactDetailGrid ],
buttons: [{
id:'btnSave',
text: 'Save',
handler: function(){
Ext.MessageBox.show({
msg: 'Creating Subscriber',
progressText: 'Saving',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'ext-mb-save'
});
subPanel.getForm().submit({
url:'/rd/dao/common/dao.php',
method:'POST',
success: function(form, action){
Ext.MessageBox.hide();
subPanel.form.findField( 'listName' ).reset( );
newSubWin.hide();
updateSubscribers( Ext.get('selectedListID').getValue() );
newSubWin.destroy(true);
newSubWin = null;
},
failure: function(form, action){
Ext.MessageBox.hide();
Ext.MessageBox.show({
title:'Error',
msg: 'List Creation Failure - Error Code:' + action.result.msg,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
});
}
},{
text: 'Cancel',
handler: function(){
anewSubWin.destroy(true);
anewSubWin = null;
}
}]
});
}
Ext.getCmp( 'anewSubWindow' ).setTitle( o.contact );
anewSubWin.show();
},
failure: function( response ){
alert( 'We were unable to make a connection to the Internet, please try again. If the problem persits, please call Rocket Dispatch support. (PST-544)!' );
}
});
},

init : function(){
}
}
}();




Ext.ux.noCollapseGroupingView = Ext.extend( Ext.grid.GroupingView, {
interceptMouse : function(e){
var hd = e.getTarget('.contactDetails .x-grid-group-hd', this.mainBody);
var hdedit = e.getTarget('.clickGrp', this.mainBody);
if( hdedit != null ){
// genData();
// Ext.listMgmt.aEEs2.genData();
} else if( hd ){
e.stopEvent();
this.toggleGroup(hd.parentNode);
}
}
});


Thanks,

Jason

Animal
30 Sep 2009, 9:39 PM
Again, it's a matter of READING your code.

Ext.listMgmt is the object that you return from that anonymous function.

That contains 3 properties, msg, aEEs2 and init.

THOSE themselves to not contain properties. aEEs2 is just a function. Are you wanting it to be an object?

Or should Ext.listMgmt contain other public properties?

Really, I think listMgmt needs to be a class, not a singleton. I think it needs to have context doesn't it? So that it can be used in multiple places?

jasondeegan
1 Oct 2009, 3:40 AM
Animal's suggestion assumes I know what the hell I'm doing - i.e. A real programmer. It's gotta' be frustrating trying to help people who aren't nearly as knowledgeable as you. Thanks Animal, I did READ it, it's the UNDERSTAND what it all means that I have an issue with. I do appreciate the time - it put me on a research path and I found a solution.

To the solution:
Remove the VAR from both contactDetailStore and contactDetailGrid and reference them in my EXTEND section.



var xwindow;
var importWin;
Ext.onReady(function(){
Ext.form.Field.prototype.msgTarget = 'side';
Ext.QuickTips.init();
});

Ext.listMgmt = function(){
var msgCt;
function createBox(t, s){
return ['<div class="msg">',
'<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
'<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
'<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
'</div>'].join('');
} return {
msg : function(title, format){
if(!msgCt){
msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
}
msgCt.alignTo(document, 't-t');
var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
m.slideIn('t').pause(1).ghost("t", {remove:true});
},
aEES2: function( subID ){
var conna = new Ext.data.Connection();
var carriersStore = new Ext.data.SimpleStore({
fields: ['carrierValue', 'carrierDisplay'],
data : Ext.listMgmtCarrier.options
});

Ext.form.Field.prototype.msgTarget = 'under';
var fsf = new Ext.ux.OrderedFormPanel({
labelWidth: 75, url:'save-form.php', bodyStyle:'padding:5px 5px 0; border-bottom:0px;', width:350, height:30, id:'fsf', region:'north',
items: [{
xtype:'textfield', width:220, name:'contactName', id:'contactName', fieldLabel: 'Name',
listeners: {
'change' : function(){
Ext.getCmp( 'anewSubWindow' ).setTitle( Ext.getCmp( 'contactName' ).getValue() );
}
}
}]
});
var contactDetailRecord = Ext.data.Record.create([
{name: 'category'}, {name: 'v'}, {name: 's'}, {name: 'phone'}, {name: 'i'}, {name: 'vid'}
]);
contactDetailStore = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({}, contactDetailRecord ),
url: '/rd/secure/scripts/contactDataGridFakeData.json',
sortInfo:{field: 'v', direction: "ASC"},
groupField:'category',
autoLoad:true
});
var genData = function(){
var e = new contactDetailRecord({
category: 'Completed',
v: 'new@exttest.com',
s: '12',
phone: '50000'
});
contactDetailStore.insert(0, e);
contactDetailGrid.getView().refresh();
}
contactDetailGrid = new Ext.grid.EditorGridPanel({
store: contactDetailStore,
columns: [
{header: "category", id:'Category', width: 100, sortable: true, dataIndex: 'category', hidden:true },
{header: "Vendor", id:'v', width: 90, sortable: true, dataIndex: 'v' },
{header: "Store", width: 50, sortable: true, dataIndex: 's' },
{header: "Phone", width: 80, sortable: true, dataIndex: 'phone', editor: new Ext.form.TextField({ allowBlank: false }) },
{header: "Call", id:'bpCol', width: 25, resizable:true, sortable: true, dataIndex: 'i' , css: 'padding-left:0px; margin-left:0px; cursor: pointer; cursor: hand;' },
{header: "Id", width: 5, sortable: true, dataIndex: 'vid', hidden:true }
],
fill: true, region:'center', width:350, clicksToEdit:1, autoHeight:true, stripeRows: true, bodyStyle:'background-color:transparent; border-top:0px;', hideHeaders:true, ctCls: 'contactDetails',
view: new Ext.ux.noCollapseGroupingView({
forceFit:true,
groupTextTpl: '<table cellpadding=0 cellspacing=0 border=0 width=100%><tr><td style="width:99%;">{[ values.rs[0].data["category"] ]} </td><td style="width:24px; text-align:right;" class="clickGrp"><img src="/rd/images/icons/plus.png"></td></tr></table>',
listeners : {
click: function(){
alert( 'this is big' );
}
}
}),
listeners: {
afteredit: function( oGrid_event ) {
genData();
conna.request({
url: '/dr/dao/dao.php',
method: 'GET',
params: {"action":"updateVendorData", "ph": oGrid_event.record.data.phone, "vid": oGrid_event.record.data.vid },
success: function( responseObject ) {
o = Ext.decode( responseObject.responseText );
alert( o.msg );
},
failure: function( responseObject ) {
o = Ext.decode( responseObject.responseText );
alert( o.msg );
}
});
contactDetailStore.reload();
},
cellclick: function(grid, rowIndex, colIndex) {
if (colIndex == 4) {
var rec = grid.store.getAt(rowIndex);
//rec.set('value', colIndex);
var ph = rec.get( 'phone' );
var compid = rec.get( 'vid' );
var bp = rec.get( 'bpCol' );
if( bp != '' ){
runner.start( pollTask );
conna.request({
url: '/dr/dao/dao.php',
method: 'GET',
params: {"action":"test", "ph": ph, "compid": compid },
success: function( responseObject ) {
o = Ext.decode( responseObject.responseText );
alert( o.msg );
},
failure: function( responseObject ) {
o = Ext.decode( responseObject.responseText );
alert( o.msg );
}
});

}
}
}
}
});
contactDetailStore.load( );

Ext.Ajax.request({
method : 'POST',
url : '/rd/secure/dao/dao.php',
params : { 'action':'getSubscriberDataJSON', 'subId':subID },
success : function( response ){
o = Ext.decode( response.responseText );
for( var r = 0 ; r < o.totalphones ; r++ ){
// addField( 'phones', o.phones[ r ].phone )
}
for( var s = 0 ; s < o.totalemails ; s++ ){
// addField( 'emails', o.emails[ s ].email )
}
for( var t = 0 ; t < o.totaltexts ; t++ ){
// addField( 'texts', o.texts[ t ].text )
}
Ext.getCmp( 'contactName' ).setValue( o.contact );
var anewSubWin = Ext.getCmp('anewSubWindow');
if (!anewSubWin) {
anewSubWin = new Ext.Window({
id: 'anewSubWindow', title:'List Management', modal:true, width:410, height:350, y:80, plain:true, closable: false, bodyStyle:'padding:5px;', buttonAlign:'center', layout:'border', items: [ fsf, contactDetailGrid ],
buttons: [{
id:'btnSave',
text: 'Save',
handler: function(){
Ext.MessageBox.show({
msg: 'Creating Subscriber',
progressText: 'Saving',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'ext-mb-save'
});
subPanel.getForm().submit({
url:'/rd/dao/common/dao.php',
method:'POST',
success: function(form, action){
Ext.MessageBox.hide();
subPanel.form.findField( 'listName' ).reset( );
newSubWin.hide();
updateSubscribers( Ext.get('selectedListID').getValue() );
newSubWin.destroy(true);
newSubWin = null;
},
failure: function(form, action){
Ext.MessageBox.hide();
Ext.MessageBox.show({
title:'Error',
msg: 'List Creation Failure - Error Code:' + action.result.msg,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
});
}
},{
text: 'Cancel',
handler: function(){
anewSubWin.destroy(true);
anewSubWin = null;
}
}]
});
}
Ext.getCmp( 'anewSubWindow' ).setTitle( o.contact );
anewSubWin.show();
},
failure: function( response ){
alert( 'We were unable to make a connection to the Internet, please try again. If the problem persits, please call Rocket Dispatch support. (PST-544)!' );
}
});
},
init : function(){
}
}
}();




Ext.ux.noCollapseGroupingView = Ext.extend( Ext.grid.GroupingView, {
interceptMouse : function(e){
var hd = e.getTarget('.contactDetails .x-grid-group-hd', this.mainBody);
var hdedit = e.getTarget('.clickGrp', this.mainBody);
if( hdedit != null ){
var contactDetailRecord = Ext.data.Record.create([
{name: 'category'}, {name: 'v'}, {name: 's'}, {name: 'phone'}, {name: 'i'}, {name: 'vid'}
]);
var e = new contactDetailRecord({
category: 'Completed',
v: 'new@exttest.com',
s: '12',
phone: '50000'
});
contactDetailStore.insert(0, e);
contactDetailGrid.getView().refresh();
} else if( hd ){
alert( 'stopping' );
e.stopEvent();
this.toggleGroup(hd.parentNode);
}
}
});