PDA

View Full Version : [Ext 1.1.1] FF and IE7 dom issue with Grid when selecting a row



fpstudios
26 Sep 2007, 12:40 PM
When I select a row, FF throws back the error "el has no properties" and with the ext.all.debug.js it stops at

getAlignToXY : function(el, p, o){
el = Ext.get(el);
var d = this.dom;
if(!el.dom){
throw "Element.alignTo with an element that doesn't exist";
}
I'm sure it's something that I'm overlooking, but was wondering if I could get some help in located this error.

Here is the script

MSGCenter = function(){
function formatBoolean(value){
return value ? '<center><b>!</b></center>' : '';
}
return {
init: function(){
var btn = Ext.get("start");
var container = new Ext.Template(
'<div id="message-center">',
'<div id="north"><div id="toolbar"></div></div>',
'<div id="west"></div>',
'<div id="center"><div id="gridView"></div></div>',
'</div>'
);
container.compile();
container.append(document.body);

var dlg = new Ext.LayoutDialog("message-center", {
modal: false,
width:800,
height:600,
shadow:true,
minWidth:680,
minHeight:400,
autoTabs:true,
proxyDrag:false,
constraintoviewport: true,
shim: true,
title: "<img src='images/icons/phone.png' align='absmiddle'>Message Center",
north: {
autoScroll:false,
split: false
},
west: {
initialSize: 180,
autoScroll:true,
split: true
},
center: {
autoScroll: true
}
});

dlg.addKeyListener(27, dlg.hide, dlg);

//create toolbar menu
var tb = new Ext.Toolbar("toolbar");
tb.add(
new Ext.Toolbar.Button({
cls: 'x-btn-text-icon bmenu',
text: "New Message",
icon: "images/icons/phone_add.png"
})
);
//create ds for phone Msg grid
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'test.php'
}),

reader: new Ext.data.JsonReader({
root: 'results',
id: 'id'
},
[
{name: 'from', mapping: 'from_name'},
{name: 'date', mapping: 'date'},
{name: 'action', mapping: 'action'},
{name: 'message', mapping: 'message'},
{name: 'flagged', mapping: 'flagged', type: 'int'}
])
});
ds.setDefaultSort('date','DESC');

//create col
var colModel = new Ext.grid.ColumnModel([
{header: "<center>!</center>", width: 20, locked: true, renderer: formatBoolean, dataIndex: 'flagged'},
{header: "From", width: 150, sortable: true, locked: true, dataIndex: 'from'},
{header: "Message", width: 150, sortable: true, locked: true, dataIndex: 'message'},
{header: "Action", width: 125, sortable: true, locked: true, dataIndex: 'action'},
{header: "Received", width: 100, sortable: true, locked: true, dataIndex: 'date'}
]);
//create grid for phone messages
var gridView = new Ext.grid.Grid("gridView",{
autoCreate: true,
ds: ds,
cm: colModel,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
stripeRows: true,
autoExpandColumn: 4,
monitorWindowResize: true,
trackMouseOver: false
});

gridView.render();
ds.load({
params: {d:'loadPhone'},
method: 'POST'
});
//begin layout
var layout = dlg.getLayout();
layout.beginUpdate();

layout.add("north", new Ext.ContentPanel("north"));
layout.add("center", new Ext.GridPanel(gridView));
layout.endUpdate();

btn.on("click", function(e){
dlg.show();
});
}
};
}();
Ext.onReady(MSGCenter.init, MSGCenter, true);

Thanks