PDA

View Full Version : EXt window id creating problem



ragendu
28 Feb 2012, 7:27 PM
Hi All,

I am trying to create a window as a pop up when I click on a button. I am able to create the pop up window on click of that button. But when I click on any part of the window, the whole window becomes greyed out and then none of the controls is working. But when I comment out the id properties of the window its not becoming greyed out. But I can't comment out the id, as it is being used in so many other places. Inside this window I am calling a form panel which has grid and some columns in that grid. Those are coming up fine. But when I click some where inside the window, it becomes greyed out and even no controls are accessible then.
Could some one please help me identify what is the problem here. I am really stuck up here :(
Any help would be greatly appreciated
Here is the code snippet I am using

var pidWin = new Ext.Window({
modal : true,
title : 'PID Search',
layout :'absolute',
// id : 'pidWin',
width : 800,
height : 400,
bodyStyle :'padding:5px;',
closeAction :'close',
plain : false,
border : true,
resizable : false,
items : [searchPIDForm],


buttons : [{
text : 'OK',
id : 'test'

},
{
text : 'Close',
handler : function(){
Ext.getCmp('pidWin').close();
}

}
]
});

vietits
28 Feb 2012, 7:55 PM
I have tried your code with commenting out the items:[searchPIDForm] because I don't have this form and it works well. So it maybe not by the existing of id property. Let try to use other value of id.


var pidWin = new Ext.Window({
modal : true,
title : 'PID Search',
layout :'absolute',
id : 'pidWin',
width : 800,
height : 400,
bodyStyle :'padding:5px;',
closeAction :'close',
plain : false,
border : true,
resizable : false,
// items : [searchPIDForm], <- I don't have this form
buttons : [{
text : 'OK',
id : 'test'
},{
text : 'Close',
handler : function(){
Ext.getCmp('pidWin').close();
}
}]
});
pidWin.show();

ragendu
28 Feb 2012, 8:21 PM
Hi,
I tried that also, but its not working.But when i comment window id it works..
This is my complete code. Can you please try this?

<script type="text/javascript">
jQuery(document).ready(function(){
// eCube search
jQuery('#eCubeSearch').click(function(){
//alert("click");
showeCubeSearch();
});
});




function showeCubeSearch(){


Ext.onReady(function() {
Ext.QuickTips.init();

var searchPIDForm = new Ext.form.FormPanel({
floatable : false,
id : 'searchForm',
tabTip : 'woot',
labelAlign :'top',
region :'west',
collapsible : true,
bodyStyle : 'padding: 5px; background-color: #DFE8F6',
border : false,
width : 600,
items : [

{
xtype : 'textfield',
fieldLabel : 'Enter PID',
id :'searchText',
width : 150
},
{
xtype : 'button',
text : 'Search',
id : 'pidSearch'
},

{
xtype : 'grid',
//store : PIDSearchStore,
height : 350,
width : '',
stripeRows : true,
header : false,
loadMask : true,
autoScroll : true,
id : 'PIDSearchGrid',
autoExpandColumn : 'description',
autoExpandMin : 150,
columns: [
//new Ext.grid.RowNumberer(),
{
xtype : 'gridcolumn',
header : 'PID',
//sortable : true,
resizable : true,
width : 70,
dataIndex : 'PID',
id : 'pid'
//hidden : false
},
{
xtype : 'gridcolumn',
header : 'Description',
// sortable : true,
resizable : true,
//width : 100,
dataIndex : 'DESCRIPTION',
id : 'description'
//hidden : false
},
{
xtype : 'gridcolumn',
header : 'Subject Area',
//sortable : true,
resizable : true,
width : 100,
dataIndex : 'SUBJECT_AREA',
id : 'subject_area'
// hidden : false
},
{
xtype : 'gridcolumn',
header : 'Job Category',
//sortable : true,
resizable : true,
width : 100,
dataIndex : 'JOB CATEGORY',
id : 'job_category'
// hidden : false
},
{
xtype : 'gridcolumn',
header : 'Status',
//sortable : true,
resizable : true,
width : 84,
dataIndex : 'STATUS',
id : 'status'
// hidden : false
},
{
xtype : 'gridcolumn',
header : 'Owner',
//sortable : true,
resizable : true,
width : 100,
dataIndex : 'OWNER',
id : 'owner'
// hidden : false
}

]
}
]

});
var eCubeSearchWin = new Ext.Window({
modal : true,
title : 'PID Search',
layout :'absolute',
id : 'eCubeSearchWin',
width : 800,
height : 400,
bodyStyle :'padding:5px;',
closeAction :'close',
plain : false,
border : true,
resizable : false,
items : [searchPIDForm],

buttons : [{
text : 'OK',
id : 'test'
},
{
text : 'Close',
handler : function(){
Ext.getCmp('eCubeSearchWin').close();
}


}
]
});
eCubeSearchWin.show();
});
}




</script>

vietits
28 Feb 2012, 8:57 PM
I ran code you supplied but it still worked well. I use Chrome and I don't use jQuery.


function showeCubeSearch(){
Ext.onReady(function() {


Ext.QuickTips.init();


var searchPIDForm = new Ext.form.FormPanel({
floatable : false,
id : 'searchForm',
tabTip : 'woot',
labelAlign :'top',
region :'west',
collapsible : true,
bodyStyle : 'padding: 5px; background-color: #DFE8F6',
border : false,
width : 600,
items : [{
xtype : 'textfield',
fieldLabel : 'Enter PID',
id :'searchText',
width : 150
},{
xtype : 'button',
text : 'Search',
id : 'pidSearch'
},{
xtype : 'grid',
//store : PIDSearchStore,
height : 350,
width : '',
stripeRows : true,
header : false,
loadMask : true,
autoScroll : true,
id : 'PIDSearchGrid',
autoExpandColumn : 'description',
autoExpandMin : 150,
columns: [
//new Ext.grid.RowNumberer(),
{
xtype : 'gridcolumn',
header : 'PID',
//sortable : true,
resizable : true,
width : 70,
dataIndex : 'PID',
id : 'pid'
//hidden : false
},{
xtype : 'gridcolumn',
header : 'Description',
// sortable : true,
resizable : true,
//width : 100,
dataIndex : 'DESCRIPTION',
id : 'description'
//hidden : false
},{
xtype : 'gridcolumn',
header : 'Subject Area',
//sortable : true,
resizable : true,
width : 100,
dataIndex : 'SUBJECT_AREA',
id : 'subject_area'
// hidden : false
},{
xtype : 'gridcolumn',
header : 'Job Category',
//sortable : true,
resizable : true,
width : 100,
dataIndex : 'JOB CATEGORY',
id : 'job_category'
// hidden : false
},{
xtype : 'gridcolumn',
header : 'Status',
//sortable : true,
resizable : true,
width : 84,
dataIndex : 'STATUS',
id : 'status'
// hidden : false
},{
xtype : 'gridcolumn',
header : 'Owner',
//sortable : true,
resizable : true,
width : 100,
dataIndex : 'OWNER',
id : 'owner'
// hidden : false
}]
}]
});


var eCubeSearchWin = new Ext.Window({
modal : true,
title : 'PID Search',
layout :'absolute',
id : 'eCubeSearchWin',
width : 800,
height : 400,
bodyStyle :'padding:5px;',
closeAction :'close',
plain : false,
border : true,
resizable : false,
items : [searchPIDForm],
buttons : [{
text : 'OK',
id : 'test'
},{
text : 'Close',
handler : function(){
Ext.getCmp('eCubeSearchWin').close();
}
}]
});
eCubeSearchWin.show();
});
}
showeCubeSearch();

ragendu
29 Feb 2012, 2:26 AM
Hi..Its working now..the function name was the problem..
Thanks for looking into this...