PDA

View Full Version : FormPanel Rendering Error ct is null



DesiTesh
8 Feb 2010, 3:10 PM
hi,

I'm using ExtJS 3.1 and newbie. Here is my code, it keep showing "ct is null" I tried different form of render to my formpanel but no luck.

Error is on this line: "dtlFormPanel.render(Ext.get('frmPanel'));"



Ext.BLANK_IMAGE_URL = '../extJS/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();
var jSource = '{"success":true,"result":{"count":5,"records":[{"number":1,"sessionid":"N66208765","case":"17685","target":"Capturing","type":"IP","pcaps":"172.59.10.15","status":"130 kb"},{"number":"2","sessionid":"N69288760","case":"17685","target":"Halted","type":"Email_Login","pcaps":"vmjones","status":"2330 kb"},{"number":"3","sessionid":"N76209981","case":"17685","target":"Halted","type":"Email_Login","pcaps":"vmjones","status":"30 kb"},{"number":"4","sessionid":"N76808700","case":"20091009","target":"Active","type":"IP","pcaps":"172.14.6.70","status":"3430 kb"},{"number":"5","sessionid":"N66208765","case":"555","target":"Halted","type":"Email_Login","pcaps":"vmjones","status":"520 kb"}]}}';

var myReader = new Ext.data.JsonReader({root: 'result.records'},
Ext.data.Record.create([{name:'number'},{name: 'sessionid'},{name: 'case'},{name: 'target'},{name: 'type'},{name: 'pcaps'},{name:'status'}]));

var store = new Ext.data.Store({reader: myReader});
store.loadData(Ext.util.JSON.decode(jSource));

var accordion = {
layout: 'accordion',
items:[{title: 'Case:17685',id:'panel1',html: ''},{title: 'Case:20091009',id: 'panel2', html: 'Content'},{title: 'Case: 555', id: 'panel3', html: 'Content'}],
width: 175,
height: 200
}

navPanel = {
title: 'Cases/Targets',
region: 'west',
margins: '2 0 5 5',
cmargins: '0 5 0 0',
height: 300,
width: 275,
minSize: 100,
maxSize: 500,
autoScroll: true,
border: false,
split:true,
width: 275,
items: [accordion]
}

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "#", width: 2, sortable: true, dataIndex: 'number'},
{header: "Session ID", width: 20, sortable: true, dataIndex: 'sessionid'},
{header: "Case", width: 20, sortable: true, dataIndex: 'case'},
{header: "Target", width: 20, sortable: true, dataIndex: 'target'},
{header: "Type", width: 20, sortable: true, dataIndex: 'type'},
{header: "#PCAPS", width: 20, sortable: true, dataIndex: 'pcaps'},
{header: "Status", width: 30, sortable: true, dataIndex: 'status'}],
viewConfig: { forceFit: true },
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
height:210,
split: true,
region: 'north'
})


var contentPanel = {
id: 'content-panel',
title: 'All Visible Targets',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
height: 250,
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: [grid]
};

var detailsPanel = {
id: 'detailPanel',
title: 'Case/Target Details',
region: 'south',
collapsible: true,
height: 250,
float:'left',
width:'33%',
bodyStyle: 'padding-bottom:15px;',
autoScroll: true,
html: '<p class="details-info">When1111 you select a Target / Case, additional details will display here.</p>'
};

// define a template to use for the detail view


var dtlFormPanel = new Ext.FormPanel({
id: 'formPanel',
title: 'Case/Target Details',
region: 'south',
float:'left',
bodyStyle: 'padding-bottom:15px;',
autoScroll: true,
items:[{
fieldLable:'Text Area',
xtype:'textarea',
text:'{sessionid}'
}],
buttons:[{text:'Save'},{text: 'Cancel'}]
});
//dtlFormPanel.render('frmPanel');
//renderTo:'frmPanel'
//Ext.onReady(function(){
//dtlFormPanel.render(document.body);
dtlFormPanel.render(Ext.get('frmPanel'));
// });


// define a template to use for the detail view


var myTpl = new Ext.Template('<div id="frmPanel">{sessionid}<br/><a href="{moreLink}">Read More</a></div>');

//var myTpl = new Ext.Template(dtlFormPanel);


grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r)
{
var detail = Ext.getCmp('detailPanel');
myTpl.overwrite(detail.body, r.data);
console.info(r.data)
});

var mainPanel = {
layout: 'border',
collapsible: false,
region: 'center',
border: false,
split:true,
width: 275,
minSize: 100,
maxSize: 500,
items:[contentPanel,detailsPanel]
}


//new Ext.Window({
// width: 600,
// height: 400,
// layout: 'border',
// region: 'center',
var container = new Ext.Viewport({
layout: 'border',
defaults: {collapsible: false, split: true, bodyStyle: 'padding:5px'},
items: [{
layout: 'border',
id: 'layout-browser',
region:'center',
defaults: {collapsible: true, split: true, bodyStyle: 'padding:15px'},
margins: '26 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
items: [navPanel,mainPanel]
}]
})



});
thanks for your help.

conorarmstrong
8 Feb 2010, 3:17 PM
Urrrrggghhh.... All that code... Please try to narrow it down to the problem at hand

Are you sure you want Ext.get and not Ext.getCmp()

Also where is frmPanel defined - at first glance all I saw was formPanel.

further, why are you passing anything to the render method? a method acts on the class it is associated with - you don't need to pass a reference to itself

DesiTesh
8 Feb 2010, 3:26 PM
Like said I'm newbie. I just took the examples and trying to adjust according to my required.
I have accordance on Left (or call North as per extJS) and Grids on Center and this Detail Form Panel on South. When anyone click on grid Item it should display all data in Form Fields. Thats all I need.

Also where is frmPanel defined ?


var myTpl = new Ext.Template('<div id="frmPanel">{sessionid}<br/><a href="{moreLink}">Read More</a></div>');

I was trying diff. stupid things but guess didnt work.
You can replace frmPanel with "detailsPanel" or use ID 'detailPanel'. This is where default text is display page onload.
var detailsPanel = { id: 'detailPanel',
..
..

mitchellsimoens
8 Feb 2010, 3:42 PM
I'm not even gonna read this and you could have just edited you previous post.


When anyone click on grid Item it should display all data in Form Fields. Thats all I need.

So all you need is something like this?

http://www.extjs.com/deploy/dev/examples/form/form-grid.html

DesiTesh
8 Feb 2010, 3:52 PM
This example showing 1st grid item as default selected. which I dont want. Also my required is I have two panel windows. Top shows grids, botton shuld show detail grid.

DesiTesh
8 Feb 2010, 3:54 PM
http://www.extjs.com/forum/showthread.php?t=91600

Please follow this thread to answer. I guess I duplicated thread confusing others. If anyone know how to delete this thread.

mitchellsimoens
8 Feb 2010, 3:56 PM
who cares what row is default selected. You're looking for 1 line of code to get a record and populate it into a form.

In your rowselect listener on your grid, all you have to do is execute:


Ext.getCmp("formPanel").getForm().loadRecord(rec);

rec is the 3rd variable passed int he rowselect function. Now all you have to make sure is that the item names in your formpanel and the keys in the rec object match up.

DesiTesh
8 Feb 2010, 4:02 PM
in my "var grid =..."

I replaced
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
with
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("formPanel").getForm().loadRecord(rec);
}
}
}),

Still not working....ct is null error

mitchellsimoens
8 Feb 2010, 4:09 PM
Probably because you have many mistakes in your code and you don't have a good grasp on ExtJS. If no one else answers before I get home from school I'll dive into it more and try to teach you what to go on.

One thing though, when your setting the width of something, you can't use a percentage. AnchorLayout can use a percentage but the width config option does not understand percentages.

DesiTesh
8 Feb 2010, 8:16 PM
To make it very easy to understand I hv uploaded code:

This is working fine when I'm not using FormPanel
http://www.myfurnace.com/ext/index.html

When I'm using FormPanel I get error.
http://www.myfurnace.com/ext/index1.html
I'm trying to display grid detail items in Form Field but not able to do it. U can see js file. (http://myfurnace.com/ext/m1.js)

mitchellsimoens
8 Feb 2010, 8:54 PM
Alright good sir. I have done a few things for you tonight. I cleaned up your code by formatting the source and by removing unneeded panels. It is much neater code now. Also, I have it working where when you click a row, it adds the data into the form now. I only have 1 textfield in it but I'm sure you can figure it out now.

Couple things:

When configuring a width, you cannot use percentages. You must use the number of pixels. If you want to use percentages, look up the anchor layout.
You do not need a panel if you are just going to add a grid or a tree in it. If you need multiple component panels then yes you would need a parent panel. For instance, I removed the panel that was wrapping around the gridpanel because it wasn't needed.
Instead of just assigning an array to a var, I assigned a new instance to each var. You'll notice each var for a panel now has 'new Ext.Panel()' for it now. So if you want to add a component to it, you can use the var such as myPanel.add(someCmp). If myPanel has already been rendered, the you will have to execute myPanel.doLayout() in order for the changes to be visual
Also, I noticed you were loading the framework directly from the extjs.com servers. I wouldn't do that.


Check it out....

Ext.BLANK_IMAGE_URL = '../extJS/resources/images/default/s.gif';

Ext.onReady(function(){
Ext.QuickTips.init();

var jSource = '{"success":true,"result":{"count":5,"records":[{"number":1,"sessionid":"N66208765","case":"17685","target":"Capturing","type":"IP","pcaps":"172.59.10.15","status":"130 kb"},{"number":"2","sessionid":"N69288760","case":"17685","target":"Halted","type":"Email_Login","pcaps":"vmjones","status":"2330 kb"},{"number":"3","sessionid":"N76209981","case":"17685","target":"Halted","type":"Email_Login","pcaps":"vmjones","status":"30 kb"},{"number":"4","sessionid":"N76808700","case":"20091009","target":"Active","type":"IP","pcaps":"172.14.6.70","status":"3430 kb"},{"number":"5","sessionid":"N66208765","case":"555","target":"Halted","type":"Email_Login","pcaps":"vmjones","status":"520 kb"}]}}';

var myReader = new Ext.data.JsonReader({
root: 'result.records'
},
Ext.data.Record.create([{
name:'number'
},{
name: 'sessionid'
},{
name: 'case'
},{
name: 'target'
},{
name: 'type'
},{
name: 'pcaps'
},{
name:'status'
}]));

var store = new Ext.data.Store({reader: myReader});
store.loadData(Ext.util.JSON.decode(jSource));

var accordion = new Ext.Panel({
layout: 'accordion',
items:[{
title: 'Case:17685',
id:'panel1',
html: ''
},{
title: 'Case:20091009',
id: 'panel2',
html: 'Content'
},{
title: 'Case: 555',
id: 'panel3',
html: 'Content'
}],
width: 175,
height: 200
});

navPanel = new Ext.Panel({
title: 'Cases/Targets',
region: 'west',
margins: '2 0 5 5',
cmargins: '0 5 0 0',
height: 300,
width: 275,
minSize: 100,
maxSize: 500,
autoScroll: true,
border: false,
split:true,
width: 275,
items: [accordion]
});

var grid = new Ext.grid.GridPanel({
title: 'All Visible Targets',
region: 'center',
store: store,
columns: [
{header: "#", width: 2, sortable: true, dataIndex: 'number'},
{header: "Session ID", width: 20, sortable: true, dataIndex: 'sessionid'},
{header: "Case", width: 20, sortable: true, dataIndex: 'case'},
{header: "Target", width: 20, sortable: true, dataIndex: 'target'},
{header: "Type", width: 20, sortable: true, dataIndex: 'type'},
{header: "#PCAPS", width: 20, sortable: true, dataIndex: 'pcaps'},
{header: "Status", width: 30, sortable: true, dataIndex: 'status'}],
viewConfig: { forceFit: true },
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
dtlFormPanel.expand();
Ext.getCmp("formPanel").getForm().loadRecord(rec);
}
}
})
});

var dtlFormPanel = new Ext.FormPanel({
id: 'formPanel',
title: 'Case/Target Details',
region: 'south',
height: 250,
collapsible: true,
bodyStyle: 'padding-bottom:15px;',
autoScroll: true,
items:[{
fieldLabel: 'Case', // fixed a typo here
xtype:'textfield',
id: 'case',
name: 'case'
}],
buttons: [{
text:'Save'
},{
text: 'Cancel'
}]
});

var mainPanel = new Ext.Panel({
layout: 'border',
collapsible: false,
region: 'center',
border: false,
split: true,
width: 275,
minSize: 100,
maxSize: 500,
items: [grid, dtlFormPanel]
});

var container = new Ext.Viewport({
layout: 'border',
defaults: {
split: true,
bodyStyle: 'padding:5px'
},
margins: '26 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
id: 'layout-browser',
items: [navPanel,mainPanel]
});
});

Any questions?

DesiTesh
8 Feb 2010, 9:42 PM
wow !! excellent. Thank you so much really appreciate your help. =D>

DesiTesh
9 Feb 2010, 11:54 AM
Silly question ? on first time page loads we hv empty form fields box, instead can we hv just some default text msg. And when user clicks on grid it should show form fields with values. I'm trying but seems like messing the code...