PDA

View Full Version : renderAt - problem



jord
12 Jan 2011, 11:02 AM
Hi,

I'm having a problem with a FormPanel.
This is my FormPanel:


var isForm = new Ext.form.FormPanel({
title: 'ItemSelector Test',
width:700,
bodyStyle: 'padding:10px;',
renderTo: 'itemselector',
items:[{
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
multiselects: [{
width: 250,
height: 200,
store: ds,
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 200,
store: [['10','Ten']],
tbar:[{
text: 'clear',
handler:function(){
isForm.getForm().findField('itemselector').reset();
}
}]
}]
}],

buttons: [{
text: 'Save',
handler: function(){
if(isForm.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
isForm.getForm().getValues(true));
}
}
}]
});

and this is fail from fireBug:

ct is null
ct.dom.insertBefore(this.el.dom, position);
ext-all-debug.js (line 10905)

when I commented out this line: renderTo: 'itemselector' everything was fine, but the window doesn't look like the example (http://dev.sencha.com/deploy/dev/examples/multiselect/multiselect-demo.html)

any ideas?

thanks for help

Jord

haggis777
12 Jan 2011, 12:32 PM
I am having the exact same problem. My code worked perfectly fine in 3.1.1, then I wanted to use the new actioncolumn and so I upgraded to 3.3.0. All I did was change the path to use the 3.3.0 libraries and I am getting the same

ct is null
ct.dom.insertBefore(this.el.dom,position);
ext-all-debug.js (line 10905).


Check out my code:


<scripttype="text/javascript">
var getData = new Object();
getData.location = '<%=portalBasePath%>/WPPermissionsPortlet/GetData.aspx';

Ext.onReady(function() {

var createBlogWin;

if (!createBlogWin)
{
createBlogWin = new Ext.Window({
layout:'border',
width:500,
title: 'Create a new Blog',
height:300,
closeAction: 'hide',
plain: false,
items: [
{
xtype: 'form',
id: 'CreateBlogForm',
frame: true,
region: 'center',
bodyStyle: 'padding:5px',
items: [
{
xtype: 'textfield',
id: 'blogTitle',
anchor: '98%',
allowBlank: false,
fieldLabel: 'Blog Title'
},
{
xtype: 'textfield',
id: 'blogDesc',
anchor: '98%',
allowBlank: false,
fieldLabel: 'Blog Description'
}
] // end of items blog form
},
{
xtype: 'panel',
region: 'south',
height: 25,
frame: true,
buttons: [
{
text: 'Create'
},
{
text: 'Cancel'
}

] // end of buttons
}
] // end items window
}); // end of window

}


var root = new Ext.tree.AsyncTreeNode({
text: 'Blogs',
draggable: false,
id: 'Id',
iconCls: 'icon-blog'
});

var mainPanel = new Ext.Panel({
layout: 'border',
renderTo: 'portletPanel',
width: 800,
height: 600,
items: [
{
xtype: 'panel',
id: 'treePanel',
region: 'west',
width: 200,
bodyStyle: 'padding:4px;',
split: true,
collapsible: false,
items: [
{
xtype:'treepanel',
animate:true,
id: 'blogTree',
border: false,
root: root,
loader: new Ext.tree.TreeLoader({
dataUrl: getData.location,
baseParams: {'action': 'getBlogsTree'},
listeners: {
load: function(tree, node, response)
{
// load the properties and anything else.
/* if (node.childNodes)
{
// only fire if there are blogs
var childNode = node.childNodes[0];
var grid = Ext.getCmp('propertyGrid');
grid.store.load({
url: getData.location,
params: {'action':'getBlog', 'blogId':childNode.attributes.id},
failure: function(e) {
Ext.Msg.alert("Error loading properties.");
}
});
} */
}
}

}),
listeners: {
click: function(n) {
// action for on tree click to load the blog and determine the sync
var grid = Ext.getCmp('propertyGrid');
grid.store.load({
url: getData.location,
params: {'action':'getBlog', 'blogId':n.attributes.id},
failure: function(e) {
Ext.Msg.alert("Error loading properties.");
}
});
}
}
}
] // end of items treePanel
},
{
xtype: 'panel',
id: 'centerPanel',
region: 'center',
border: false,
layout: 'border',
items: [
{
xtype: 'panel',
id: 'innerPanel',
layout: 'border',
region: 'center',
items: [
{
xtype: 'toolbar',
region: 'north',
height: 30,
buttons: [
{
text: 'Create Blog',
iconCls: 'icon-application-add',
handler: function()
{
createBlogWin.show();
}
},
'-',
{
text: 'Sync',
iconCls: 'icon-application-lightning'
}
] // end of buttons
},
{
xtype: 'panel',
region: 'center',
border: false,
id: 'tabsPanel',
layout: 'border',
items: [
{
xtype: 'tabpanel',
region: 'center',
resizeTabs: false,
activeTab: 0,
items: [
{
title: 'Properties',
iconCls: 'icon-page-white-wrench',
//layout: 'border',
items: [

] // end of items property tab
},
{
title: 'Admins',
iconCls: 'icon-key'
},
{
title: 'Editors',
iconCls: 'icon-pencil'
},
{
title: 'Authors',
iconCls: 'icon-text-signature'
},
{
title: 'Contributors',
iconCls: 'icon-hand-point'
},
{
title: 'Subscribers',
iconCls: 'icon-group'
}] // end of items tabs
}] // end of items tabsPanel
}] // items end inner Panel
}] // end of items Center Panel
}] // end of items main panel
}); // end of MainPanel
var tree = Ext.getCmp('blogTree');
tree.expandAll();
}); // end of Ready

haggis777
17 Jan 2011, 10:30 AM
Anybody have any suggestions as to what might be causing this issue?

haggis777
21 Jan 2011, 10:11 AM
BUMP!

aconran
21 Jan 2011, 3:55 PM
Ensure that the div that you are rendering to with the renderTo configuration option exists in the html page and that the document is ready (wrapped inside an onReady block).