PDA

View Full Version : Errors in ext-all-debug.js



pankajspace
21 Aug 2009, 12:06 AM
I have created a TabPanel. It works in such a way that when I click a menu item a new tab is created and gets loaded into the TabPanel. The tab has a grid inside it. It works fine when I load the first tab. But when I load the second tab the grid is not get filled with data. It gives us the following 2 errors. Can anybody explain me what is happening exactly?

1) this.config[col] is undefined
chrome://firebug/content/blank.gif return this.config[col].width; ext-all-debug.js (line 62836)

2) this.mainBody is undefined
chrome://firebug/content/blank.gif this.mainBody.update(result).setWidth(this.getTotalWidth());
ext-all-debug.js (line 61618)




The code is available as attachment to this thread.

Thanks in advance,
Pankaj.

21 Aug 2009, 2:34 AM
Sounds like you have a column referenced that does not exist (autoExpandColumn)?

I'm not touching zip files. How about posting the relevant code properly via code tags?

pankajspace
21 Aug 2009, 2:49 AM
1) index.php



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<?php
require ('inc/config.php');
opendb();
$query = 'SELECT id, title from objects;';
$result = mysql_query($query) or db_fail($query);
if(mysql_num_rows($result))
{
$arrObjects = array();
while($row = mysql_fetch_assoc($result))
{
$arrObjects[$row['id']] = $row['title'];
}
}
// print_r($arrObjects);
// $strObj = implode(',',$arrObjects);
// echo '<br /> $strObj : '.$strObj;
// closedb();
?>

<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Home</title>
<link type="text/css" rel="stylesheet" href="scripts/extjs/resources/css/ext-all.css">
<style type="text/css">

</style>
<script type="text/javascript" src="scripts/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="scripts/extjs/ext-all-debug.js"></script>
<script type="text/javascript">
function tExecuteScripts(obj)
{
var scriptTags = obj.getElementsByTagName('script');
var string = '';
var jsCode = '';
// alert(obj.id);
for(var no=0;no<scriptTags.length;no++){
if(scriptTags[no].src){
var head = document.getElementsByTagName("head")[0];
var scriptObj = document.createElement("script");
scriptObj.setAttribute("type", "text/javascript");
scriptObj.setAttribute("src", scriptTags[no].src);
alert(scriptTags[no].src);
}else{
jsCode = jsCode + scriptTags[no].innerHTML;
}
}
if(jsCode)
{
try{
if (!jsCode)
return;
if (window.execScript){
window.execScript(jsCode)
}else if(window.jQuery && jQuery.browser.safari){ // safari detection in jQuery
window.setTimeout(jsCode, 0);
}else{
window.setTimeout(jsCode, 0);
}
}catch(e){

}
}
}

Ext.onReady(function()
{
Ext.BLANK_IMAGE_URL = 'images/s.gif'; //Required for extjs to work properly.
Ext.QuickTips.init(); //Required for showing validation tips.

Ext.ux.TabCloseMenu = function()
{
var tabs, menu, ctxItem;
this.init = function(tp)
{
tabs = tp;
tabs.on('contextmenu', onContextMenu);
};

function onContextMenu(ts, item, e)
{
if (!menu)
{ // create context menu on first right click
menu = new Ext.menu.Menu({
items: [{
id: tabs.id + '-close',
text: 'Close Tab',
handler: function()
{
tabs.remove(ctxItem);
}
},
{
id: tabs.id + '-close-others',
text: 'Close Other Tabs',
handler: function()
{
tabs.items.each(function(item)
{
if (item.closable && item != ctxItem)
{
tabs.remove(item);
}
});
}
}]
});
}
ctxItem = item;
var items = menu.items;
items.get(tabs.id + '-close').setDisabled(!item.closable);
var disableOthers = true;
tabs.items.each(function()
{
if (this != item && this.closable)
{
disableOthers = false;
return false;
}
});
items.get(tabs.id + '-close-others').setDisabled(disableOthers);
e.stopEvent();
menu.showAt(e.getPoint());
}
};

// tabs for the center
var tabs = new Ext.TabPanel
({
id: 'myTPanel',
resizeTabs : true,
minTabWidth : 75,
border : true,
region : 'center',
// margins : '3 3 3 3',
activeTab : 0,
defaults : {autoScroll:true},
enableTabScroll : true,
plugins : new Ext.ux.TabCloseMenu(),
items : []
});

//Handler function of Menu.
var addTab = function(me)
{
if(document.getElementById('obj_panel_' + me.id))
{
var panel = Ext.getCmp('obj_panel_' + me.id);
panel.show();
}
else
{
var panel = new Ext.Panel({
id: 'obj_panel_' + me.id,
title: me.text,
autoLoad: 'objdet.html?ajax=true&object=' + me.id,
closable: true,
});
var handle = tabs.add(panel).show();
setTimeout('tExecuteScripts(document.getElementById("' + panel.id + '"));', 500);
}
return;
}

var toolBar = new Ext.Toolbar
({
items:
[{
xtype: 'tbbutton',
text: 'OBJECT MANAGER',
menu:
[
{
id: '0',
text : 'Object Manager',
handler : addTab,
},
<?php
foreach ($arrObjects as $key => $value)
{
echo '{id:';
echo '\''.$key.'\',';
echo 'text:';
echo '\''.$value.'\',';
echo 'handler: addTab,},';
}
?>
]
}]
});

var win = new Ext.Window
({
readerTo:Ext.getBody(),
width:500,
height:500,
closable:false,
border:false,
movable: true,
draggable: false,
resizable: false,
shadow:true,
plain:true,
minimizable:false,
maximized:true,
maximizable:false,
layout: 'border',
items: [tabs],
tbar:[toolBar]
});
win.show(this);0.00
});
</script>
</head>
<body>
</body>
</html>


--------------------------------------------------------------------------------------


2)objdet.php



<?php
if(!$_REQUEST['object'])
die('Invalid Object');
else
$object = $_REQUEST['object'];
if($_REQUEST['ajax'])
{
echo '<div id="dvMain' . $object . '" align="center"></div>
<script>';
}
else
{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><?php echo ucfirst( $t->title); ?> Manager</title>
<style type="text/css">
#dvMain<?php echo $object;?>
{
width: 1000px;
margin: auto;
padding: 10px;
}
</style>
<script>
Ext.onReady(function()
{
Ext.BLANK_IMAGE_URL = 'images/s.gif'; //Required for extjs to work properly.
Ext.QuickTips.init(); //Required for showing validation tips.
<?php
}
require('scripts/tlib/tom.php');
require('inc/config.php');
$t = new tom($object);

// echo '$object : '. $object;
// echo '$t->fd : '. $t->fd;
// print_r($t->fd);
$gridUrl = 'content/getvalues.php?table= '. $t->title;
// $gridUrl = $gridUrl + $object;
// echo '<br />$object : '. $object;
for ($i=1;$i<=$t->fields;$i++)
$arrData[]= $t->fd[$i]['name'];

// echo '<br /> $arrData : <pre />';
// print_r($arrData);
$strData = implode('\',\'',$arrData);
// $strData = preg_replace('/[^A-Za-z0-9,\'\]\[]/','',trim($strData));
$strData = 'id\',\''.$strData; //Added id column in data.
// echo '<br /> $strData : '. $strData;
$strData = '[\''.$strData.'\']';
?>
var gridStore<?php echo $object;?> = new Ext.data.Store //Main grid data store.
({
proxy:new Ext.data.HttpProxy
({
url: '<?php echo $gridUrl; ?>', //This url is for loading data into the grid.
}),
reader: new Ext.data.JsonReader
({
root:'rows',
fields: <?php echo $strData; ?>, //Here defining the data fields format as returning from the url in json format.
}),
});
gridStore<?php echo $object;?>.load();
// Finished Declaring Stores. <--------------|

// Started declaring all grid field editors. |-------------->
var text_edit_val = new Ext.form.TextField({allowBlank: false}); //TextField Editor With Validations.
var text_edit = new Ext.form.TextField(); //TextField Editor.
var checkbox_edit = new Ext.form.Checkbox(); //Checkbox Editor.
var date_edit = new Ext.form.DateField({format: 'd/m/Y g:i:s A'});
var file_upload = new Ext.form.TextField();
// Finished Declaring all grid field editors. <--------------|

var ds_model<?php echo $object;?> = Ext.data.Record.create(<?php echo $strData; ?>); //Data Format for adding data row.
var grid<?php echo $object;?> = new Ext.grid.EditorGridPanel //Defining Grid.
({
renderTo: Ext.get('dvMain<?php echo $object;?>'),
frame: true,
title: '<?php echo ucfirst( $t->title); ?> Manager',
height: 400,
enableColumnMove: false,
// enableColumnResize: false,
clicksToEdit: 1,
store: gridStore<?php echo $object;?>,
autoExpandColumn: true,
forceFit: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
columns:
[
// {header: "ID", dataIndex: 'id',sortable: false},
<?php
for ($i=1;$i<=$t->fields;$i++)
{
$type = strtoupper($t->fd[$i]['type']);
// $value = preg_replace('/[^A-Za-z0-9,\'\]\[]/','',trim($value));
?>
{header: "<?php echo $t->fd[$i]['displayname']; ?>", dataIndex: "<?php echo $t->fd[$i]['name']; ?>",sortable: true,editor:<?php echo $dataTypes[$type] ?>},
<?php
}
?>
],
listeners:
{
rowclick: function(e)
{
Ext.getCmp('remove').enable();
},
beforeedit: function(e) //Grid Listener.
{
var sm<?php echo $object;?> = grid<?php echo $object;?>.getColumnModel();
},
afteredit: function(e) //Grid Listener.
{
Ext.getCmp('save').enable();
Ext.getCmp('reset').enable(); // Disabling 'Reset Changes' button in the begining.
Ext.getCmp('discard').enable(); // Disabling 'Discard Changes' button in the begining.
}
},
tbar: //Top tool bar of the grid.
[
{ // Lable
xtype: 'tbtext',
id: 'txtObject<?php echo $object;?>',
text: 'Object Name : <?php echo ucfirst($t->title); ?>'
}
],
bbar: //Bottom toolbar of the grid.
[
{ //Button for adding new record.
text: 'Add Row',
icon: 'images/grid_add.png',
cls: 'x-btn-text-icon',
handler: function()
{
Ext.getCmp('save').disable(); // Disabling 'Save Changes' button in the begining.
Ext.getCmp('reset').enable(); // enabling 'Reset Changes' button in the begining.
Ext.getCmp('discard').enable(); // enabling 'Discard Changes' button in the begining.
Ext.getCmp('remove').enable();
grid<?php echo $object;?>.getStore().insert
(
grid<?php echo $object;?>.getStore().getCount(),
new ds_model<?php echo $object;?>
({
<?php
foreach($arrData as $key => $value)
{
// $value = preg_replace('/[^A-Za-z0-9,\'\]\[]/','',trim($value));
echo $value ." :'', ";
}
?>
})
);
grid<?php echo $object;?>.startEditing(grid<?php echo $object;?>.getStore().getCount()-1,0);
}
},
{
xtype: 'tbseparator',
},
{// Removing a record from the grid.
text: 'Remove Row',
icon: 'images/grid_delete.png',
cls: 'x-btn-text-icon',
id:'remove',
disabled:true,
handler: function()
{
var sm<?php echo $object;?> = grid<?php echo $object;?>.getSelectionModel();
if (sm<?php echo $object;?>.hasSelection())
{
var sel<?php echo $object;?> = sm<?php echo $object;?>.getSelected();
Ext.Msg.show
({
title: 'Remove Record.',
buttons: Ext.MessageBox.YESNOCANCEL,
msg: 'Remove Row '+sel<?php echo $object;?>.data.id+'?',
fn: function(btn)
{
if (btn == 'yes')
{
grid<?php echo $object;?>.getStore().remove(sel<?php echo $object;?>);
var conn = new Ext.data.Connection();
conn.request
({
url: 'inc/updatevalue.php',
params:
{
action: 'delete',
tbl:'<?php echo $t->title; ?>',
id: sel<?php echo $object;?>.data.id,
},
success: function(resp,opt)
{
grid<?php echo $object;?>.getStore().remove(sel<?php echo $object;?>);
gridStore<?php echo $object;?>.reload();
},
failure: function(resp,opt)
{
Ext.Msg.alert('Error','Unable to delete record.');
}
});
}
}
});
}
}
},
'->',
{// Save changes button at the bottom.
text:'Save Changes',
icon:'images/save.gif',
id: 'save',
name:'save',
cls: 'x-btn-text-icon',
disabled: true,
handler: function(e)
{
var allRecords<?php echo $object;?> = grid<?php echo $object;?>.store.getModifiedRecords();
if(allRecords<?php echo $object;?>.length == 0) //Forcing to add at least one property to the new object.
{
Ext.Msg.alert('Error', 'Please enter at least one property to the new object.');
}
else
{
Ext.getCmp('reset').disable();
var da = [];
// loop through records and create json with data
for(var i = 0; i < allRecords<?php echo $object;?>.length; i++)
{
var record<?php echo $object;?> = allRecords<?php echo $object;?>[i];
var recData = Ext.apply({}, allRecords<?php echo $object;?>[i].data);
// you can conditionally delete some props here if you need to
var jsonData = Ext.encode(recData);
da.push(jsonData);
}
var data = '[' + da.join(',') + ']';
var conn = new Ext.data.Connection();
conn.request
({
url: 'inc/updatevalue.php',
params:
{
action: 'update',
tbl:'<?php echo $t->title; ?>',
params: data,
// propid: 3,
},
success: function(resp,opt)
{
Ext.getCmp('reset').disable();
Ext.getCmp('save').disable();
grid<?php echo $object;?>.store.commitChanges();
gridStore<?php echo $object;?>.reload();
Ext.Msg.alert('Success', 'Data saved successfully.');
},
failure: function(resp,opt)
{
Ext.getCmp('reset').enable();
Ext.getCmp('save').enable();
Ext.Msg.alert('Error', 'Data not saved.Try again.');
}
});
}
}
},
{
xtype: 'tbseparator'
},
{
xtype:'button',
text:'Reset Changes',
icon: 'images/refresh.png',
cls: 'x-btn-text-icon',
id: 'reset',
disabled: true,
handler: function(e)
{
gridStore<?php echo $object;?>.rejectChanges();
Ext.getCmp('save').disable();
grid<?php echo $object;?>.getSelectionModel().clearSelections();
}
},
{
xtype: 'tbseparator'
},
{
xtype:'button',
text:'Discard Changes',
icon: 'images/discard.png',
cls: 'x-btn-text-icon',
disabled: true,
id: 'discard',
handler: function(e)
{
gridStore<?php echo $object;?>.rejectChanges();
gridStore<?php echo $object;?>.reload();
Ext.getCmp('save').disable();
Ext.getCmp('discard').disable();
Ext.getCmp('reset').disable();
Ext.getCmp('remove').disable();
grid<?php echo $object;?>.getSelectionModel().clearSelections();
}
}
]
});
<?php
if($_REQUEST['ajax'])
{
echo '
</script>';
}
else
{
?>
});
</script>
</head>
<body>
<div id="dvMain<?php echo $object;?>" align="center"></div>
</body>
</html>
<?php
}
?>

21 Aug 2009, 3:04 AM
I'm done wit this post. apparently you don't know what the following statement means:



How about posting the relevant code properly via code tags?

Also, step through your code! Figure out what in *YOUR* javascript is causing Ext JS to barf.

I'm out.

carol.ext
21 Aug 2009, 5:27 AM
Yikes! This isn't a php forum, perhaps you should post the generated code. Anyway, if you are having the problem in Internet Explorer you could be having a problem with an extra/trailing comma (http://extjs.com/learn/Ext_FAQ_Debugging#Internet_Explorer). That's because you've got this in a for loop so even the last column gets a comma after it:


{header: "<?php echo $t->fd[$i]['displayname']; ?>", dataIndex: "<?php echo $t->fd[$i]['name']; ?>",sortable: true,editor:<?php echo $dataTypes[$type] ?>},

You can find these things by checking your generated javascript at http://jslint.com