PDA

View Full Version : Problem openForm Pop Up



jicay57
7 Jun 2010, 1:04 AM
I meet a problem for the creation of a Pop form Up.
In fact I load(charge) a list in a picture(board), and I would like to add the possibility of creating a new line via a button "New".

My list takes care well but I can see a first error:



comp is undefined
}else if(!comp.events){


An idea why I have this error??

On the other hand, I do not manage to post(show) my Pop Up form to be able to create a new line.
I have the error message:

Here is the code for the chargement of grid :



[B]var grid = new Ext.grid.GridPanel({
store: gridStore,
colModel: new Ext.grid.ColumnModel({
defaults: { sortable: true, editable: false },
columns: conf.segmentListColumnModel}),
// viewConfig: { forceFit: false },
bbar: bbarPager,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
width: 900,
height: conf.pgSizeToHeight( PAGE_SIZE ),
tbar: [{
text: 'New',
handler : function(){
// access the Record constructor through the grid's store

conf.segmentId = -1;
conf.segmentName = 'Nouveau segment';
conf.segmentDetails = 'Details segment';
var segmentCreate = ControlPanelSegmentsCommands ( conf );
segmentCreate.show();
Ext.MessageBox.alert( 'Segment créé' );
} }]
});


function _loadSegmentCard ( grid, cpConf, atRowindex ) {
var record = grid.getStore().getAt( atRowindex );
var segId = record.data[ 'id' ];
var segCard = Ext.getCmp( cpConf.segWindowId );
var segForm = Ext.getCmp( cpConf.segFormId );
cpConf.pSegmentId = segId;

segForm.getForm().load({
waitMsg: 'Loading segment...',
url: cpConf.loadSegmentResource,
params: {segmentId: segId},
success: function ( form, action ) {/*action.result.data*/},
failure: function( form, action ) {
Ext.MessageBox.alert
( "Load failed",
action.result.errorMessage || action.result.errorMsg ); } }); }

grid.on( 'rowdblclick', function ( grid, rowindex, event ) {
var record2 = grid.getStore().getAt( rowindex );
var segId2 = record2.data[ 'id' ];
var segName2 = record2.data[ 'name' ];
conf.pSegmentId = segId2;
conf.pSegmentName = segName2;
var segmentCard = ControlPanelSegmentCard( conf );

segmentCard.show();
(function(){ _loadSegmentCard( grid, conf, rowindex ); }).defer(1); } );

return grid; }



Here is my code for the creation of the Pop Up:




// ControlPanelUsersListCommands :: conf -> Panel


(function(){

var DEBUG_STEP = 1;
function DEBUG () {}

// Start Point

ControlPanelSegmentsCommands = function ( conf ) {

function B ( cfg ) {
return Ext.apply(cfg, {border:false, autoScroll: true}); }

function C ( cfg ) {
return Ext.apply(cfg, {border: false}); }

function W ( cfg ) {
return Ext.apply(cfg,{width:'100%'}); }

function W_ ( cfg ) {
return cfg; }

function FP ( cfg ) {
return new Ext.form.FormPanel( B(cfg) ); }

function EP ( cfg ) {
return new Ext.Panel( cfg ); }

function EZ ( cfg ) {
return new Ext.Panel( cfg ); }

function EC ( cfg ) {
return new Ext.Panel( cfg ); }

function TF ( cfg ) {
var _F = new Ext.form.TextField( W_( cfg ) );
var _L = new Ext.form.Label({forId: _F.getId(),
text: cfg.fieldLabel});
var label
= EP(W_(B({
flex: 1.5,
items:[ _L ] })));
var field
= EP(W_(B({
flex: 3,
items:[ _F ] })));
return EP(W(B({
padding: '2px',
layout: 'hbox',
items:[ label, field ] }))); }


var SegId = {
fieldLabel: 'Segment ID',
invalidText: 'Segment ID is required',
name: 'segmentId',
value: '',
allowBlank: false,
tabIndex: 1 };

var segName = {
fieldLabel: 'Segment name',
invalidText: 'Segment name is required',
name: 'segmentName',
value: '',
allowBlank: false,
tabIndex: 2 };

DEBUG();

var fUP = {
layout: 'vbox', align: 'stretch', pack: 'start',
items: [ TF( SegId ),
TF( segName ) ] };

DEBUG();

var eDetails = {
allowBlank: false,
fieldLabel: 'Details',
invalidText: 'Details is required',
name: 'segmentDetails',
value: '',
tabIndex: 3 };

DEBUG();

var fEM = {
layout: 'vbox', align:'stretch', pack: 'start',
items: [ TF( eDetails ) ] };

DEBUG();

var P1 = function () { return {
flex: 1,
layout: 'border',
anchorSize: { width: 600, height: 300 },
items: [ C({region: 'east', layout:'fit', width: '50%', items: [ fUP ] }),
B({region: 'center', layout:'fit', width: '100%', items: [ fEM ] }) ]}; };

DEBUG();

var dataPanel = function () { return EP({
baseCls: 'x-plain',
anchor: '100% 100%',
layout: 'vbox', align: 'stretch',
items: [
EP( W( B( P1() ) ) )
] }); };

DEBUG();

function _segmentCreatePanel ( conf ) {
var segmentCreateFun = ControlPanelSegmentsCommands( conf );
return segmentCreateFun; }

var W = 'Loading blank segment card from server';
var SC = 'Segments creation';

function err ( msg ) {
Ext.MessageBox.alert( "Load failure", msg ); }

function openForm ( conf ) {
var segmentCreateFun = _segmentCreatePanel( conf );
var segmentCreate = segmentCreateFun();
segmentCreate.show();

var segmentForm = Ext.getCmp( conf.segFormId );
if( !segmentForm )
return;
segmentForm.getForm().load({
waitMsg: W,
url: conf.createSegmentResource,
success: function ( form, action ) {
segmentCreate.setTitle( SC ); },
failure: function( form, action ) {
err( action.result.errorMessage ); } });

form.getForm().submit({
url: conf.storeSegmentResource,
failure: function ( form, action ) {
discardWindow();
switch( action.failureType ) {
case Ext.form.Action.CLIENT_INVALID:
Ext.MessageBox.alert( 'Failure', 'XXXX: Invalid values' );
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.MessageBox.alert( 'Failure', 'YYYY: Ajax communication failed' );
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert( 'Failure', action.result.errorMsg || action.result.errorMessage ); } },

success: function ( form, action ) {
function updStore () {
var segment = action.result.segment;
var store = Ext.StoreMgr.get( conf.listSegmentStoreId );
if( ! store )
return;
var idx = store.findExact( "segmentId", segment.id );conf.segsId;
if( idx < 0 ) {
store.reload(); }
else {
var rec = store.getAt( idx );
rec.beginEdit();
rec.set( 'segmentId', segment.segmentId );
rec.set( 'segmentName', segment.segmentName );
rec.set( 'segmentDetails', segment.segmentDetails );
rec.endEdit();
store.fireEvent( 'datachanged', store ); } }
try {
updStore(); }
catch( bof ) {
alert( 'EfaControlPanelSegmentsCommands ' + bof.message );}
discardWindow(); } }); };

DEBUG();

var makeForm = function () { return new Ext.form.FormPanel({
id: conf.segsId,
border: false, hideBorders: true,
items:[ dataPanel() ],
buttonAlign: 'left',
buttons: [
{text: 'Save' , handler: onSaveHandler },
{text: 'Cancel', handler: onCancelHandler } ] }); };

DEBUG();

var makeWindow = function () { return new Ext.Window({
title: 'Segment card',
closeAction: 'destroy',
id: conf.segWindowId,
width: 600,
height: 500,
minWidth: 600,
minHeight: 300,
layout: 'border',
plain: true,
bodyStyle: 'padding:5px;',
items: [ B({region: 'center', layout: 'fit', items: [ makeForm() ]}) ] });

DEBUG();

return makeWindow;

};
}

})();



I declared well my function(office) "segmentCreate" nevertheless... But i have the error message :

segmentCreate is undefined
chrome://firebug/content/blank.gif segmentCreate.show();

An idea of or can come the problem??

7 Jun 2010, 4:28 AM
I meet a problem for the creation of a Pop form Up.
In fact I load(charge) a list in a picture(board), and I would like to add the possibility of creating a new line via a button "New".

My list takes care well but I can see a first error:



comp is undefined
}else if(!comp.events){


An idea why I have this error??

On the other hand, I do not manage to post(show) my Pop Up form to be able to create a new line.
I have the error message:

Here is the code for the chargement of grid :



[B]var grid = new Ext.grid.GridPanel({
store: gridStore,
colModel: new Ext.grid.ColumnModel({
defaults: { sortable: true, editable: false },
columns: conf.segmentListColumnModel}),
// viewConfig: { forceFit: false },
bbar: bbarPager,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
width: 900,
height: conf.pgSizeToHeight( PAGE_SIZE ),
tbar: [{
text: 'New',
handler : function(){
// access the Record constructor through the grid's store

conf.segmentId = -1;
conf.segmentName = 'Nouveau segment';
conf.segmentDetails = 'Details segment';
var segmentCreate = ControlPanelSegmentsCommands ( conf );
segmentCreate.show();
Ext.MessageBox.alert( 'Segment créé' );
} }]
});


function _loadSegmentCard ( grid, cpConf, atRowindex ) {
var record = grid.getStore().getAt( atRowindex );
var segId = record.data[ 'id' ];
var segCard = Ext.getCmp( cpConf.segWindowId );
var segForm = Ext.getCmp( cpConf.segFormId );
cpConf.pSegmentId = segId;

segForm.getForm().load({
waitMsg: 'Loading segment...',
url: cpConf.loadSegmentResource,
params: {segmentId: segId},
success: function ( form, action ) {/*action.result.data*/},
failure: function( form, action ) {
Ext.MessageBox.alert
( "Load failed",
action.result.errorMessage || action.result.errorMsg ); } }); }

grid.on( 'rowdblclick', function ( grid, rowindex, event ) {
var record2 = grid.getStore().getAt( rowindex );
var segId2 = record2.data[ 'id' ];
var segName2 = record2.data[ 'name' ];
conf.pSegmentId = segId2;
conf.pSegmentName = segName2;
var segmentCard = ControlPanelSegmentCard( conf );

segmentCard.show();
(function(){ _loadSegmentCard( grid, conf, rowindex ); }).defer(1); } );

return grid; }



Here is my code for the creation of the Pop Up:




// ControlPanelUsersListCommands :: conf -> Panel


(function(){

var DEBUG_STEP = 1;
function DEBUG () {}

// Start Point

ControlPanelSegmentsCommands = function ( conf ) {

function B ( cfg ) {
return Ext.apply(cfg, {border:false, autoScroll: true}); }

function C ( cfg ) {
return Ext.apply(cfg, {border: false}); }

function W ( cfg ) {
return Ext.apply(cfg,{width:'100%'}); }

function W_ ( cfg ) {
return cfg; }

function FP ( cfg ) {
return new Ext.form.FormPanel( B(cfg) ); }

function EP ( cfg ) {
return new Ext.Panel( cfg ); }

function EZ ( cfg ) {
return new Ext.Panel( cfg ); }

function EC ( cfg ) {
return new Ext.Panel( cfg ); }

function TF ( cfg ) {
var _F = new Ext.form.TextField( W_( cfg ) );
var _L = new Ext.form.Label({forId: _F.getId(),
text: cfg.fieldLabel});
var label
= EP(W_(B({
flex: 1.5,
items:[ _L ] })));
var field
= EP(W_(B({
flex: 3,
items:[ _F ] })));
return EP(W(B({
padding: '2px',
layout: 'hbox',
items:[ label, field ] }))); }


var SegId = {
fieldLabel: 'Segment ID',
invalidText: 'Segment ID is required',
name: 'segmentId',
value: '',
allowBlank: false,
tabIndex: 1 };

var segName = {
fieldLabel: 'Segment name',
invalidText: 'Segment name is required',
name: 'segmentName',
value: '',
allowBlank: false,
tabIndex: 2 };

DEBUG();

var fUP = {
layout: 'vbox', align: 'stretch', pack: 'start',
items: [ TF( SegId ),
TF( segName ) ] };

DEBUG();

var eDetails = {
allowBlank: false,
fieldLabel: 'Details',
invalidText: 'Details is required',
name: 'segmentDetails',
value: '',
tabIndex: 3 };

DEBUG();

var fEM = {
layout: 'vbox', align:'stretch', pack: 'start',
items: [ TF( eDetails ) ] };

DEBUG();

var P1 = function () { return {
flex: 1,
layout: 'border',
anchorSize: { width: 600, height: 300 },
items: [ C({region: 'east', layout:'fit', width: '50%', items: [ fUP ] }),
B({region: 'center', layout:'fit', width: '100%', items: [ fEM ] }) ]}; };

DEBUG();

var dataPanel = function () { return EP({
baseCls: 'x-plain',
anchor: '100% 100%',
layout: 'vbox', align: 'stretch',
items: [
EP( W( B( P1() ) ) )
] }); };

DEBUG();

function _segmentCreatePanel ( conf ) {
var segmentCreateFun = ControlPanelSegmentsCommands( conf );
return segmentCreateFun; }

var W = 'Loading blank segment card from server';
var SC = 'Segments creation';

function err ( msg ) {
Ext.MessageBox.alert( "Load failure", msg ); }

function openForm ( conf ) {
var segmentCreateFun = _segmentCreatePanel( conf );
var segmentCreate = segmentCreateFun();
segmentCreate.show();

var segmentForm = Ext.getCmp( conf.segFormId );
if( !segmentForm )
return;
segmentForm.getForm().load({
waitMsg: W,
url: conf.createSegmentResource,
success: function ( form, action ) {
segmentCreate.setTitle( SC ); },
failure: function( form, action ) {
err( action.result.errorMessage ); } });

form.getForm().submit({
url: conf.storeSegmentResource,
failure: function ( form, action ) {
discardWindow();
switch( action.failureType ) {
case Ext.form.Action.CLIENT_INVALID:
Ext.MessageBox.alert( 'Failure', 'XXXX: Invalid values' );
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.MessageBox.alert( 'Failure', 'YYYY: Ajax communication failed' );
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert( 'Failure', action.result.errorMsg || action.result.errorMessage ); } },

success: function ( form, action ) {
function updStore () {
var segment = action.result.segment;
var store = Ext.StoreMgr.get( conf.listSegmentStoreId );
if( ! store )
return;
var idx = store.findExact( "segmentId", segment.id );conf.segsId;
if( idx < 0 ) {
store.reload(); }
else {
var rec = store.getAt( idx );
rec.beginEdit();
rec.set( 'segmentId', segment.segmentId );
rec.set( 'segmentName', segment.segmentName );
rec.set( 'segmentDetails', segment.segmentDetails );
rec.endEdit();
store.fireEvent( 'datachanged', store ); } }
try {
updStore(); }
catch( bof ) {
alert( 'EfaControlPanelSegmentsCommands ' + bof.message );}
discardWindow(); } }); };

DEBUG();

var makeForm = function () { return new Ext.form.FormPanel({
id: conf.segsId,
border: false, hideBorders: true,
items:[ dataPanel() ],
buttonAlign: 'left',
buttons: [
{text: 'Save' , handler: onSaveHandler },
{text: 'Cancel', handler: onCancelHandler } ] }); };

DEBUG();

var makeWindow = function () { return new Ext.Window({
title: 'Segment card',
closeAction: 'destroy',
id: conf.segWindowId,
width: 600,
height: 500,
minWidth: 600,
minHeight: 300,
layout: 'border',
plain: true,
bodyStyle: 'padding:5px;',
items: [ B({region: 'center', layout: 'fit', items: [ makeForm() ]}) ] });

DEBUG();

return makeWindow;

};
}

})();



I declared well my function(office) "segmentCreate" nevertheless... But i have the error message :

segmentCreate is undefined
chrome://firebug/content/blank.gif segmentCreate.show();

An idea of or can come the problem??

No offense, but how in the world do you expect ANYONE to follow that ball of yarn!?!?

jicay57
7 Jun 2010, 4:49 AM
:)):))
Sorry my english is very bad and it's difficult for explain my problem.

I've created a panel with a list who load it in a database.
It's a list whith attributes : an Id, a Name and a detail.

I woud like can create a new element.
I've created a form who is loaded when the user click on the button "New" :



var grid = new Ext.grid.GridPanel({
store: gridStore,
colModel: new Ext.grid.ColumnModel({
defaults: { sortable: true, editable: false },
columns: conf.segmentListColumnModel}),
// viewConfig: { forceFit: false },
bbar: bbarPager,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
width: 900,
height: conf.pgSizeToHeight( PAGE_SIZE ),
tbar: [{
text: 'New',
handler : function(){
// access the Record constructor through the grid's store

conf.segmentId = -1;
conf.segmentName = 'Nouveau segment';
conf.segmentDetails = 'Details segment';
var segmentCreate = ControlPanelSegmentsCommands ( conf );
var window = segmentCreate();
window.show();

} }]


I call this function "ControlPanelSegmentsCommands ( conf )" :



ControlPanelSegmentsCommands = function ( conf ) {

function B ( cfg ) {
return Ext.apply(cfg, {border:false, autoScroll: true}); }

function C ( cfg ) {
return Ext.apply(cfg, {border: false}); }

function W ( cfg ) {
return Ext.apply(cfg,{width:'100%'}); }

function W_ ( cfg ) {
return cfg; }

function FP ( cfg ) {
return new Ext.form.FormPanel( B(cfg) ); }

function EP ( cfg ) {
return new Ext.Panel( cfg ); }

function EZ ( cfg ) {
return new Ext.Panel( cfg ); }

function EC ( cfg ) {
return new Ext.Panel( cfg ); }

function TF ( cfg ) {
var _F = new Ext.form.TextField( W_( cfg ) );
var _L = new Ext.form.Label({forId: _F.getId(),
text: cfg.fieldLabel});
var label
= EP(W_(B({
flex: 1.5,
items:[ _L ] })));
var field
= EP(W_(B({
flex: 3,
items:[ _F ] })));
return EP(W(B({
padding: '2px',
layout: 'hbox',
items:[ label, field ] }))); }


var SegId = {
fieldLabel: 'Segment ID',
invalidText: 'Segment ID is required',
name: 'segmentId',
value: '',
allowBlank: false,
tabIndex: 1 };

var segName = {
fieldLabel: 'Segment name',
invalidText: 'Segment name is required',
name: 'segmentName',
value: '',
allowBlank: false,
tabIndex: 2 };

var fUP = {
layout: 'hbox', align: 'stretch', pack: 'start',
items: [ TF( SegId ),
TF( segName ) ] };

var eDetails = {
allowBlank: false,
fieldLabel: 'Details',
invalidText: 'Details is required',
name: 'segmentDetails',
value: '',
tabIndex: 3 };

var fEM = {
layout: 'hbox', align:'stretch', pack: 'start',
items: [ TF( eDetails ) ] };


var P1 = function () { return {
flex: 1,
layout: 'border',
anchorSize: { width: 600, height: 500 },
items: [ C({region: 'center', width: '50%', items: [ fUP ] }),
B({region: 'west', layout:'fit', items: [ fEM ] }) ]}; };


var dataPanel = function () { return EP({
baseCls: 'x-plain',
anchor: '100% 100%',
layout: 'hbox', align: 'stretch',
items: [
EP( W( B( P1() ) ) )
] }); };

function makeForm () { return new Ext.form.FormPanel({
id: conf.segsId,
border: false, hideBorders: true,
items:[ dataPanel() ],
buttonAlign: 'left',
buttons: [
{text: 'Save' , handler: function(){ alert('save');} },
{text: 'Cancel', handler: function(){ alert('cancel'); } } ] }); };


function makeWindow () { return new Ext.Window({
title: 'Segment card',
closeAction: 'destroy',
id: conf.segWindowId,
width: 600,
height: 500,
minWidth: 600,
minHeight: 300,
layout: 'border',
plain: true,
bodyStyle: 'padding:5px;',
items: [ B({region: 'center', layout: 'fit', items: [ makeForm() ]}) ] }); }

return makeWindow;
};


But i have an error when i want call the panel (makeWindow).
The error :

"segmentCreate is undefined"

Do you understand ?