PDA

View Full Version : qustion for can't getting the correct result using Ext.ux.InfoPanel!help!



hahaEr2003
30 Jul 2007, 11:16 PM
I try to use Ext.ux.InfoPanel to create a independ panel,but when I try to do like this,I found I can't modify the InfoPanel's width,and put it in correct place with shadow to.
any problem?
help!
my code like this:

HTML:


<html>
<head>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./accordion.css">
<script type="text/javascript" src="../ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>


<link rel="stylesheet" type="text/css" href="accordion.css">
<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>
<script type="text/javascript" src="accordion.js"></script>
</head>
<body>

<table width=400 id="panels-tab" >
<tr>
<td>
<div id="panels-tab" >


<div id="ipanel-7-body">
<div class="text-content">
<h3>7. Auto-created, body from markup</h3>
<p>&nbsp;</p>
<p>Markup:</p>
<pre class="code">&lt;div id=&quot;ipanel-7-body&quot;&gt;
&lt;div class=&quot;text-content&quot;&gt;
&lt;h3&gt;7. Auto-created...&lt;/h3&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;Markup:&lt;/p&gt;
...
&lt;/div&gt;
&lt;/div&gt;</pre>
<p>Code:</p>
<pre class="code">new Ext.ux.InfoPanel({
title: '7. Auto-created...'
, id: 'ipanel-7'
, desktop: 'panels-tab'
, bodyEl: 'ipanel-7-body'
, autoCreate: true
, draggable: true
, useShadow: true
, resizable: true
});</pre>
</div>
</div>

</div>
</td>
</tr>
</td></tr>
</table>




</body>
</html>




this is js code:




new Ext.ux.InfoPanel({
title: '7. Auto-created...'
, id: 'ipanel-7'
, bodyEl: 'ipanel-7-body'
, autoCreate: true
, draggable: false
, useShadow: true
, resizable: true
});


why the panel 's width isn't 400?

jsakalos
1 Aug 2007, 2:29 AM
You should give width to the panel container.



<div style="width:200px" id="panel-ct">
...
...
</div>


var panel = new Ext.ux.InfoPanel('panel-ct', ....);


If you use shadow the real width will be 200px + shadow width.