Rendering HTML Control into ExtJS

Posted by Nismeh under JavaScript on 9/18/2013 | Points: 10 | Views : 3920 | Status : [Member] | Replies : 3
Hi,

I am using one <div> in which I want to display values. Because of some reason I am using one ExtJS panel which should redirect that <div>. But I am not able to redirect this div in this panel. Can any one suggest?
My Div tag
<div id ='divAllWarnings' style='width:30%;height: 150px; margin: 0 auto;float:left;overflow:scroll'> </div>

ExtJS Pa nel
var formPanel = {
id: 'pnlAllWarning',
xtype: 'panel',
renderTo: 'divAllWarnings',
title: 'Warning Panel',
bodyPadding: '5',
width: 350,
height: 160
};

IT KNOWLEDGE IS APPLIED KNOWLEDGE
So Just Do It



Responses

Posted by: Bandi on: 9/18/2013 [Member] [MVP] Platinum | Points: 25

Up
0
Down
Render Ext.Panel to a DIV tag
<!--

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>

<!-- Revised from demo code from ext3.0.0 -->
<body>
<script type="text/javascript">
Ext.onReady(function() {

var myData = {
records : [
{ name : "Record 0", column1 : "0", column2 : "0" },
{ name : "Record 1", column1 : "1", column2 : "1" },
{ name : "Record 2", column1 : "2", column2 : "2" },
{ name : "Record 3", column1 : "3", column2 : "3" },
{ name : "Record 4", column1 : "4", column2 : "4" },
{ name : "Record 5", column1 : "5", column2 : "5" },
{ name : "Record 6", column1 : "6", column2 : "6" },
{ name : "Record 7", column1 : "7", column2 : "7" },
{ name : "Record 8", column1 : "8", column2 : "8" },
{ name : "Record 9", column1 : "9", column2 : "9" }
]
};


// Generic fields array to use in both store defs.
var fields = [
{name: 'name', mapping : 'name'},
{name: 'column1', mapping : 'column1'},
{name: 'column2', mapping : 'column2'}
];

// create the data store
var gridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records'
});


// Column Model shortcut array
var cols = [
{ id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
{header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
{header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
];

// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup : 'gridDDGroup',
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 650,
height : 325,
region : 'west',
title : 'Data Grid',
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});

//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout: 'fit',
renderTo : 'panel',
items : [
grid
],
bbar : [
'->', // Fill
{
text : 'Reset Example',
handler : function() {
//refresh source grid
gridStore.loadData(myData);
}
}
]
});

});
</script>

<div id="panel"></div>

</body>
</html>


Reference: http://www.java2s.com/Code/JavaScript/Ext-JS/RenderExtPaneltoaDIVtag.htm

Mark This Response as Answer
--
Chandu
http://www.dotnetfunda.com/images/dnfmvp.gif

Nismeh, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Nismeh on: 9/18/2013 [Member] Starter | Points: 25

Up
0
Down
Hi Chandu,

I tried same thing. But after that i am using
update function for ExtJS panel. And it throws an error saying Cannot read property 'body' of undefined

IT KNOWLEDGE IS APPLIED KNOWLEDGE
So Just Do It

Nismeh, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Bandi on: 9/18/2013 [Member] [MVP] Platinum | Points: 25

Up
0
Down
Refer this
http://stackoverflow.com/questions/8558564/panel-drag-and-drop-is-not-working-in-extjs-4-1

I think that is ExtJS version bug..

Mark This Response as Answer
--
Chandu
http://www.dotnetfunda.com/images/dnfmvp.gif

Nismeh, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response