PDA

View Full Version : Search items not coming perfect as I expand west panel



bbeher
4 Mar 2010, 9:42 PM
In screen1.gif everything is coming perfect. Here west panel is collapsed. And search items are coming perfect. But in screen2.gif when I expand the westpanel those search items are not coming perfectly as I marked red circle. Actually those items should come in the middle like this submit button. So kindly help me out.

Here's my code I used for layout & those search items..........


................................ layout.js ............................................

// JavaScript Document
Ext.onReady(function(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
<!-- Ext.state.Manager.setProvider(new Ext.state.CookieProvider());-->

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:30
}),{
region:'west',
id:'west-panel',
title:'Main Menu',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
collapsed: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
title:'Matching Process',
border:false,
iconCls:'nav',
autoScroll:true
}]
}, new Ext.TabPanel({
region:'center',
split: true,
deferredRender:false,
activeTab:'0',
items:[{
contentEl:'center1',
title: 'Search Items',
bodyStyle:'padding:5px 5px 5px 5px',
autoScroll:true
}]
})
]
});
});

//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


.................................... searchitems.js...............................



Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
var stagetype = new Ext.data.SimpleStore({
fields: ['id', 'genre1'],
data : [['1','SEL FA Sub Ledger Reconciliation'],['2','FA Contra'],['3','Proceeds of Sales of FA # 12505'],['4','FA - Gain/Loss'],['5','Held for Sale #16298'],['6','CIP and Software CIP'],['7','FA - Property Tax - SD 15417, 22270, 22271'],['8','FA Clearing - #17154 Buildings'],['9','FA Clearing - #17155 Bldg. Improvements'],['10','PC & LAN Equipment and Software']]
});
var stagetype2 = new Ext.data.SimpleStore({
fields: ['id', 'genre1'],
data : [['1','New'],['2','Open'],['3','Matched'],['4','On Hold'],['5','Closed'],['6','All']]
});
var stagetype3 = new Ext.data.SimpleStore({
fields: ['id', 'genre1'],
data : [['1','Debit Side'],['2','Credit Side'],['3','All']]
});
var SJT = new Ext.form.ComboBox( {
fieldLabel : 'Select Clearing Account',
name : 'SJT',
//fieldLabel: 'Genre',
mode: 'local',
store: stagetype,
triggerAction: 'all',
displayField:'genre1',
width : 200,
//value:'554213'
emptyText:'---Select---'

});

var SJT2 = new Ext.form.ComboBox( {
fieldLabel : 'Select Match Status',
name : 'SJT2',
//fieldLabel: 'Genre',
mode: 'local',
store: stagetype2,
triggerAction: 'all',
displayField:'genre1',
width : 200,
//value:'554213'
emptyText:'---Select---'

});
var SJT3 = new Ext.form.ComboBox( {
fieldLabel : 'Select Input Document',
name : 'SJT3',
//fieldLabel: 'Genre',
mode: 'local',
store: stagetype3,
triggerAction: 'all',
displayField:'genre1',
width : 200,
//value:'554213'
emptyText:'---Select---'

});

var top = new Ext.FormPanel({
labelAlign: 'side',
labelWidth: 140,
frame:true,
//title: 'List of Open Line Items',
iconCls: 'icon-grid',
bodyStyle:'padding: 0 0 0 0',
width: '100%',
//autoScroll: true,
//height: 300,
//height: 75,
items:[{
xtype:'fieldset',
title: '',
width: '97%',
autoHeight: true,
bodyStyle:'margin: -6px 0 -6 0',
items: [{
layout:'column',
bodyStyle:'padding: 0 0 0 0',
items:[{
columnWidth:.5,
layout: 'form',
bodyStyle:'padding: 10 0 10 0',
//width: 300,
items: [SJT]
},{
columnWidth:.5,
layout: 'form',
bodyStyle:'padding: 10 0 10 0',
//width: 300,
items: [SJT2]
},{
columnWidth:.5,
layout: 'form',
bodyStyle:'padding: 10 0 10 0',
//width: 300,
items: [SJT3]
}]
}]

}],
buttons: [{
text: 'Submit'
}],

buttonAlign:'center'
});
top.render('layout');
});


//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


Thanks,

Biswajit

Animal
4 Mar 2010, 10:28 PM
render()??

What does the warning in the API doc for render tell you?

bbeher
4 Mar 2010, 10:33 PM
what's render()?? I didn't get you!!!!!!!!!!

bbeher
4 Mar 2010, 10:48 PM
There's no warning showing. Only highlighted part in screen2.gif is hiding instead of coming inside the fieldset.

Animal
5 Mar 2010, 12:14 AM
what's render()?? I didn't get you!!!!!!!!!!

Your code has



top.render('layout');


So you of course read it:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/renderDocs.jpg

bbeher
5 Mar 2010, 12:24 AM
Here's the code for mypage.html. 'layout' is one of the div inside mypage.html. and both layout.js & searchitems.js is rendering inside that html. searchitems.js is rendered in centre region i.e 'layout' div.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Base</title>
<!--The following three js files you need to get the framework design-->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<!--This js file creates all the regions and panel for the framework-->
<script type="text/javascript" src="../shared/Sony_FA_JS/layout.js"></script>
<!--This js file is required for toolbar to appear on the header section and given the reference to DIV id="Toolbar"-->
<script type="text/javascript" src="../shared/Sony_FA_JS/toolbar_2.0.js"></script>
<!--External JS files for any new components in the framework-->
<!--The following two files are required for loading tree-->
<script type="text/javascript" src="../shared/Sony_FA_JS/searchitems.js"></script>
<!--This js file is used for loading dummy tree -->
<script type="text/javascript" src="../shared/Sony_FA_JS/simpletreemenu.js"></script>
<!--Add any external css file here-->
<!--Default css for whole framework-->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/simpletree.css" />
<!--Section for external css files ends here-->
<!-- The following script is required for avoiding loading image from ext server-->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/s.gif';
</script>
</head>
<!--Body Content starts here-->
<body>
<!--The code for North Panel starts here-->
<!--The North DIV contains 4 divsincluding Logo, The text and the Toolbar-->
<div id="north">
<div class="header1"></div>
<div class="header2"><img src="../../resources/images/New_Header22.gif" /></div>
<div class="header3"><img src="../../resources/images/New_Header3.gif" align="middle" /><span class="login">Welcome: FA Controller</span></div>
<div class="header4" id="Toolbar"></div>
</div>
<!--End of North Panel-->
<!--This section contains all the west panel coding-->
<!--Code for first panel in west region-->
<div id="west">
<!-- The code for west Panel starts here with first Accordian-->
<ul id="treemenu1" class="treeview" style="margin-left:5px; margin-top:5px;">
<li><a href="auto_matching.html">Auto Matching</a></li>
<li><a href="manual_matching.html">Manual Matching</a></li>
<li><a href="matching_closure.html">Matching Closure</a></li>
<li><a href="search_items.html">Search Items</a></li>
</ul>
<script type="text/javascript">
//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
ddtreemenu.createTree("treemenu1", false)
</script>
</div>
<!--The first panel ends here-->
<!--The end of West region code-->

<!--This div is placed inside the center region and the external pages will load into this region-->
<div id="center1">
<div id="layout"></div>
<div id="layout1" style="margin-top:5px;"></div>
</div>
<!--Code for Center Pane region ends here-->
</body>
<!--End of body contents-->
</html>