Please help to check it.
When I click the combobox in app/view/ContractManagerView.js, all the components will disappear.(in iFrame of NetWeaver 7.3 Portal)
cntrctMang.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%
Boolean privCheck = true;
%>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contract_Manager</title>
<script type="text/javascript" src="../lib/ext-4.1.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/ext-4.1.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="cntrctMang.css" />
<link rel="stylesheet" type="text/css" href="../js/ux/grid/css/GridFilters.css" />
<link rel="stylesheet" type="text/css" href="../js/ux/grid/css/RangeMenu.css" />
<% if(privCheck){ %>
<script type="text/javascript" src="cntrctMang.js"></script>
<script type="text/javascript" src="data/cntrctMangUtil.js"></script>
<% } else{ %>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('Warning','No Permission.');
});
</script>
<%} %>
</head>
<body></body>
</html>
cntrctMang.js
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../js/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature'
]);
Ext.application({
models: [
'ContractModel',
'PoGridModel',
'MilestoneGridModel',
'AttachmentModel',
'IpSelectGeomModel',
'ActionModel'
],
stores: [
'PartnerNameStore',
'CetegoryStore',
'GeometryStore',
'StatusStore',
'ContractGridStore',
'MasterContractStore',
'ProductCategoryStore',
'RenewalPeriodStore',
'PoGridStore',
'CurrencyStore',
'MilestoneGridStore',
'MilestoneStore',
'ProductStore',
'ApprovalLogStore',
'AttachmentStore',
'IpSelectGeomStore',
'PartnerNameCreateNewStore',
'DetailFormStatusStore',
'ActionStore',
'IpSelectTechStore',
'ProductSelectStore'
],
views: [
'ContractManagerView',
'ContractDetailedForm',
'AttachmentForm',
'ProductListSelectedPanel',
'PoGridEditForm',
'MilestoneGridEditForm',
'ProductListGrid',
'MilestoneGrid',
'ApprovalForm',
'HistoryActionListWindow'
],
autoCreateViewport: true,
name: 'cntrctMang'
});
cntrctMang.css
.updated-row .x-grid-cell {
background-color: #FFFF99 !important;
}
.x-btn-default-toolbar-small {
border-color: #a3bad9 !important;
}
.x-column-header {
background: no-repeat right !important;
background-image: url('../lib/ext-4.1.1/resources/themes/images/default/button/arrow.gif') !important;
}
app/view/Viewport.js
Ext.define('cntrctMang.view.Viewport', {
extend: 'cntrctMang.view.ContractManagerView',
renderTo: Ext.getBody(),
requires: [
'cntrctMang.view.ContractManagerView',
'cntrctMang.view.ContractDetailedForm',
'cntrctMang.view.AttachmentForm',
'cntrctMang.view.PoGridEditForm',
'cntrctMang.view.MilestoneGrid',
'cntrctMang.view.MilestoneGridEditForm',
'cntrctMang.view.ProductListGrid',
'cntrctMang.view.ProductListSelectedPanel',
'cntrctMang.view.ApprovalForm'
]
});
app/view/ContractManagerView.js
Ext.define('cntrctMang.view.ContractManagerView', {
extend: 'Ext.container.Viewport',
id: 'ContractManagerView',
autoScroll: false,
layout: {
align: 'stretch',
type: 'vbox'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'form',
anchor: '100%',
border: 0,
layout: {
type: 'column'
},
id: 'queryForm',
bodyBorder: false,
bodyPadding: 10,
title: '',
height: 110,
//region: 'north',
margins: '',
items: [
{
xtype: 'container',
columnWidth: 0.33,
layout: 'anchor',
items: [
{
xtype: 'combobox',
id: 'PartnerNameComboBox',
name: 'PartnerNameComboBox',
fieldLabel: 'Partner Name',
anchor: '96%',
labelWidth: 105,
displayField: 'displayName',
forceSelection: true,
valueField: 'acctCd',
typeAhead: true,
queryMode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'All',
store: 'PartnerNameStore'
// listConfig: {
// getInnerTpl: function () {
// return '[{acctCd}] {acctShortName}';
// }
// }
},
{
xtype: 'combobox',
id: 'ContractStatusComboBox',
name: 'ContractStatusComboBox',
fieldLabel: 'Contract Status',
anchor: '96%',
labelWidth: 105,
displayField: 'statusName',
valueField: 'statusCode',
typeAhead: true,
forceSelection: true,
queryMode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'All',
store: 'StatusStore'
}
]
},
{
xtype: 'container',
columnWidth: 0.33,
layout: 'anchor',
items: [
{
xtype: 'combobox',
id: 'GeometryComboBox',
name: 'GeometryComboBox',
fieldLabel: 'Geometry',
anchor: '96%',
labelWidth: 120,
displayField: 'geomDesc',
valueField: 'geomCode',
typeAhead: true,
forceSelection: true,
queryMode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'All',
//multiSelect: true,
store: 'GeometryStore'
}, {
xtype: 'datefield',
id: 'EffectiveStartDate',
name: 'EffectiveStartDate',
fieldLabel: 'Effective Date: from',
anchor: '96%',
labelSeparator: ' ',
labelWidth: 120,
format: 'Y/m/d'
}
]
},
{
xtype: 'container',
columnWidth: 0.34,
layout: 'anchor',
items: [
{
xtype: 'combobox',
id: 'ContractCategoryComboBox',
name: 'ContractCategoryComboBox',
fieldLabel: 'Contract Category',
anchor: '100%',
labelWidth: 105,
displayField: 'categoryName',
valueField: 'categoryCode',
typeAhead: true,
forceSelection: true,
queryMode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'All',
store: 'CetegoryStore'
},
{
xtype: 'datefield',
id: 'EffectiveEndDate',
name: 'EffectiveEndDate',
anchor: '100%',
fieldLabel: 'to',
hideLabel: false,
labelSeparator: ' ',
labelWidth: 50,
labelAlign: 'right',
labelPad: 60,
format: 'Y/m/d'
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
border: 0,
padding: '0 0 0 10',
style: 'background: white',
ui: 'footer',
dock: 'bottom',
defaults: {minWidth: 100},
items: ['->',
{
xtype: 'button',
id: 'QueryButton',
text: 'Query',
listeners: {
'click': function (btn, ent) {
if(this.up('form').getForm().isValid()){
var myParams = this.up('form').getForm().getValues(true);
Ext.getCmp('cntrctGrid').getStore().load({ params: myParams });
Ext.getCmp('cntrctGrid').show();
}
}
}
},
{
xtype: 'button',
id: 'ResetButton',
text: 'Reset',
listeners: {
click: {
fn: me.onResetButtonClick,
scope: me
}
}
},
{
xtype: 'button',
id: 'CreateNewButton',
text: 'Create New',
hidden: true,
listeners: {
click: {
fn: me.onCreateNewButtonClick,
scope: me
},
afterrender: function(me){
Ext.Ajax.request({
url: '../rest/cntrctMang/isPriorityUser',
method: 'GET',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
if(obj.success){
me.show();
}
},
failure: function(response, opts) {
}
});
}
}
}
]
}
]
},
{
xtype: 'panel',
border: 0,
id: 'QueryPanel',
layout: {
type: 'fit'
},
bodyBorder: false,
title: '',
flex: 1,
//region: 'center',
items: [
{
xtype: 'gridpanel',
autoShow: false,
padding: 10,
title: '',
hidden: true,
id: 'cntrctGrid',
store: 'ContractGridStore',
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'acctCd',
flex: 1,
renderer: function(value){
var store = Ext.data.StoreManager.lookup('PartnerNameStore');
var rendererValue = "";
for(var i=0;i<store.getCount();i++){
var model = store.getAt(i);
if(value == model.get('acctCd')){
rendererValue = "[" + model.get('acctCd') + "] " + model.get('acctShortName');
break;
}
}
return rendererValue;
},
text: 'Partner Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'cntrctCatg',
flex: 1,
renderer: cntrctMang.Util.contractCategoryRenderer,
text: 'Contract Category'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var temp="";
if(record.get('cntrctLevel')>1){
for(var i=0;i<record.get('cntrctLevel')-1;i++){
temp=temp+">";
}
temp=temp+" ";
}
return '<a href="javascript:cntrctMang.Util.viewContractDetail(\'' + record.get('cntrctNo') + '\', \''+record.get('cntrctVer')+'\', \''+record.get('cntrctStatus')+'\', \''+record.get('acctCd')+'\', false, false )">' +temp+ value + '</a>';
},
dataIndex: 'cntrctTitle',
flex: 2,
text: 'Contract Name'
},
{
xtype: 'datecolumn',
dataIndex: 'effDt',
flex: 1,
text: 'Effective Date',
format: 'Y/m/d'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var store = Ext.data.StoreManager.lookup('GeometryStore');
var rendererValue = "";
for(var i=0;i<store.getCount();i++){
var model = store.getAt(i);
if(value.indexOf(model.get('geomCode'))>-1){
if(rendererValue == ""){
rendererValue = model.get('geomDesc');
}else{
rendererValue = rendererValue + ", " + model.get('geomDesc');
}
}
}
metaData.tdAttr= 'data-qtip="'+rendererValue+'"';
return rendererValue;
},
dataIndex: 'geomList',
flex: 1.5,
text: 'Geometry'
},
{
xtype: 'gridcolumn',
dataIndex: 'cntrctStatus',
flex: 1,
renderer: cntrctMang.Util.contractStatusRenderer,
text: 'Status'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return '<a href="javascript:cntrctMang.Util.openHistorySelector(\''+ record.get('cntrctNo') +'\',\'' + record.get('cntrctVer') + '\',\'' + record.get('cntrctStatus') + '\',\'' + record.get('acctCd') + '\')">' + Ext.util.Format.date(value,'Y/m/d') + '</a>';
},
dataIndex: 'updateDt',
text: 'Last Update'
},
{
xtype: 'gridcolumn',
hidden: true,
id: 'topCntrctTitle',
width: 50,
dataIndex: 'topCntrctTitle',
text: 'Top Cntrct Title'
}
],
features: [
{
ftype: 'grouping',
groupHeaderTpl: '{name}',
hideGroupedHeader: true
}
]
}
]
}
],
listeners: {
render: {
fn: me.onContractManagerViewBeforeShow,
scope: me
}
}
});
me.callParent(arguments);
},
onResetButtonClick: function(button, e, options) {
var item=["PartnerNameComboBox","GeometryComboBox","ContractCategoryComboBox",
"ContractStatusComboBox","EffectiveStartDate","EffectiveEndDate"];
for (i=0;i< item.length; i++) {
Ext.getCmp(item[i]).reset();
}
Ext.getCmp('cntrctGrid').hide();
},
onCreateNewButtonClick: function(button, e, options) {
var partnerName = Ext.getCmp('PartnerNameComboBox').getValue();
var geometryList = Ext.getCmp('GeometryComboBox').getValue();
cntrctMang.Util.viewContractDetail('', '', '', '', true, false);
var store = Ext.getCmp('ContractCurrencyCombo').getStore();
store.load();
store = Ext.getCmp('PartnerNameCombo').getStore();
store.load();
//store.add({typeId: 'Credit', typeDesc: 'Credit'});
},
onContractManagerViewBeforeShow: function(abstractcomponent, options) {
var store = Ext.getCmp('PartnerNameComboBox').getStore();
store.load();
store = Ext.getCmp('GeometryComboBox').getStore();
store.load();
}
});