मैं इस तरह देखने के लिए एक लेआउट पाने के लिए कोशिश कर रहा हूँ में नेस्ट: hbox with vbox right panel http://img124.yfrog.com/img124/7643/mockup.pngसमस्या एक hbox लेआउट
मैं इस काम के करने की कोशिश कर मज़ा के सभी प्रकार किया है। आखिर में ऐसा कुछ मिला जो लगभग काम करता है, लेकिन केवल इसलिए कि मैंने एक्सटी जेएस के 3.2 बीटा में गिरा दिया था।
मुझे एक अंतिम समस्या के साथ छोड़ दिया गया है। नीचे दिया गया कोड पैनलों को लगभग सही तरीके से प्रदर्शित करेगा, हालांकि दाहिने हाथ पैनल कंटेनर के दाहिने हाथ को भरने के लिए नहीं फैलता है।
यदि मैं लेआउट कॉन्फ़िगरेशन (कोड में दिखाया गया कोड में दिखाया गया है) जोड़ता हूं और लेआउट विशेषता को हटा देता हूं, तो मैं स्पेस और vbox भरने के लिए दो हॉक्स पैनलों को खींचने के बजाय लंबवत व्यवस्थित सभी तीन पैनलों के साथ समाप्त होता हूं पैनल एक दूसरे से ऊपर हैं।
मैं वास्तव में नीचे दिए गए कोड पर नजर रखने वाले किसी व्यक्ति की सराहना करता हूं और यह बताता हूं कि मुझे क्या याद आ रहा है या यदि मुझे ExtJS 3.2b में कोई बग का सामना करना पड़ा है।
धन्यवाद
स्टीफन
<html>
<head>
<script src="/script/ext/adapter/ext/ext-base-debug.js"></script>
<script src="/script/ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/script/ext/resources/images/default/s.gif';
</script>
<script type="text/javascript">
Ext.onReady(function() {
var detailPanel = {
id : 'detail-panel',
contentEl : 'pageDetail',
title : 'Detail Panel'
};
var workflowPanel = {
id : 'workflowpanel',
title : 'Page Status',
contentEl : 'pageWorkflow'
};
var accessPanel = {
id : 'accesspanel',
title : 'Page Access',
contentEl: 'pageAccess'
};
var extraPanel = {
title : 'extra panel',
layoutConfig : {
type : 'vbox',
align : 'stretch',
pack : 'start'
},
defaults : {
flex : 1,
frame : true
},
items : [workflowPanel,accessPanel]
};
var overviewPanel = {
layout : 'hbox',
/* layoutConfig : {
type :'hbox',
align : 'stretch',
pack : 'start'
},
*/
defaults :{
frame : true,
flex : 1
},
items : [detailPanel,extraPanel]
};
vp = new Ext.Viewport({
items : [overviewPanel] ,
renderTo : Ext.getBody()
});
});
</script>
<link rel="stylesheet" type="text/css" href="/script/ext/resources/css/ext-all.css" />
</head>
<body>
<div id="overview" class="x-hidden">
<div id="pageDetail">
<dl>
<dt>Page URL</dt>
<dd>/contact/</dd>
<dt>Navigation Title</dt>
<dd>Get in touch...</dd>
</dl>
<dl>
<dt>Associate project to types</dt>
<dd> </dd>
<dt>Associate projects related to other projects</dt>
<dd> </dd>
</dl>
</div>
<div id="pageExtra">
<div id="pageWorkflow">
<em>Current Status</em><br>
Live on 08/03/2010 23:23 by username
<br/>
<em>Workflow</em><br>
Some status text
<dl>
<dt>Last Updated</dt>
<dd>07/03/2010 10:10</dd>
<dt>Updated by</dt>
<dd>username*</dd>
</dl>
<br/>
</div>
<div id="pageAccess">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae neque risus, non elementum arcu. Donec et convallis ipsum. Vivamus nec viverra nunc.
</div>
</div>
</div>
</body>
</html>
आपका layoutConfig पूरी तरह से तय हो गई मेरी लेआउट रन विफलता। धन्यवाद :) – Stevko