PDA

View Full Version : Popup Window



reej
21 Aug 2012, 2:13 AM
I have a file xxx_popup.js in which i have designed a grid, I need to pass value from a parent window grid, and open this grid in a popup..

Kindly help me, how to define a popup and call this file

reej
21 Aug 2012, 2:28 AM
var win = new Ext.Window({
width:960
,height:300
,plain:true
,layout:'border'
,border:true
,header:true
//,buttonAlign:'center'
,title: 'Fa piao Issuance Spread - Dec 2011'
,closable:true
,items:[popupGridPanel]
});


where popupGridPanel is the var in which i have defined the grid --> this is from the same file..

but i need to open a grid which is defined in a another file, by passing a value to the child file..

How to achieve this. Iam new to extjs and kindly suggest ur ideas on the same

sword-it
21 Aug 2012, 4:03 AM
Hi reej,

You can achieve this by Ext.define(), here is sample code define a MyClassWindow into your window.js file


Ext.define('App.MyClassWindow', {
extend:'Ext.window.Window',
width:200,
height:100,
title:'custom class'
})



here is working sample example http://jsfiddle.net/xSfmE/

S (http://jsfiddle.net/xSfmE/)ee also http://docs.sencha.com/ext-js/4-1/#!/api/Ext-method-define

reej
21 Aug 2012, 6:39 PM
Thank you sword.. It would be so helpfull to me.. I'll try it .
Thanks a lot.

Thanks,
Reej.M

reej
21 Aug 2012, 7:49 PM
file location :-> examples/vatbrkdwnrpt/vatbreakdwnrpt_popup.js
my js file code is as follows

Ext.define('My.vatbrkdwnrpt.vatbreakdwnrpt_popup', {
extend:'Ext.window.Window',
width:200,
height:100,
title:'Fa Piao Issuance Spread',
postingMonFrmParent:'something',

openGrid:function(postingMon)
{
alert("Clicked Month : " + postingMon);
popupJsonStore.loadData(popupJsonData);
}
});


var popupGridPanel = Ext.create('Ext.grid.Panel', {
store: popupJsonStore
,columnLines: true
,forceFit: 'true'
,header : true
,bodyBorder :true

,columns: [{
// text : vatHeader.getName1(),
text : 'Division',
width : 60,
sortable : false,
dataIndex: 'division'
,color:'red'
},
{
text : 'FP Reg ID',
width : 55,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'fpRegID'

}
,{
text : 'FP Machine ID',
width : 25,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'fpMacID'
}
,{
text : 'Invoice No',
width : 25,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'invoiceNo'
},{
text : 'Sales Order No',
//flex:1,
width : 25,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'salesOrderNo'
}
,{
text : 'Web Order No',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'webOrderNo'
}
,{
text : 'Tax Class',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'taxClass'
},
{
text : 'Invoice Date',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'invoiceDate'
},
{
text : 'GL Posting Date',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'glPostingDate'
},
{
text : 'Invoice Base Amt',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'invBaseAmt'
},
{
text : 'Invoice VAT Amt',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'invVatAmt'
}
,{
text : 'VAT Amt Posted in GL',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'vatAmtinGL'
}
,{
text : 'Fa piao Issue Date',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'fpIssueDt',
id:'fpIssDt'
}
,{
text : 'FP No.',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'FPNo'
}
,{
text : 'FP Issue Base AMT',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'fpIssueBaseAmt'
}
,{
text : 'FP VAT AMT',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'fpVatAmt'
}
,{
text : 'Variance',
width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'variance'
}
],

layout:'border'
,region:'center'
,border:false
,header:false
//,frame:true
,title: 'Fa piao Issuance Spread - Dec 2011'
,height:'100%'
,autoScroll:true
//,minheight:100
,viewConfig: {
stripeRows: true

}
});


var popupJsonData = [ {
"division" : "151",
"fpRegID":"12345",
"fpMacID":"MACHINE 1",
"invoiceNo":"765434",
"salesOrderNo":"1289",
"webOrderNo":"657",
"taxClass":"7",
"invoiceDate":"10/12/2010",
"glPostingDate":"10/12/2010",
"invBaseAmt":"986.45",
"invVatAmt":"40.00",
"vatAmtinGL":"986.45",
"fpIssueDt":"10/12/2010",
"FPNo":"6784",
"fpIssueBaseAmt":"946.45",
"fpVatAmt":"986.45",
"variance":"946.45"
},
{
"division" : "151",
"fpRegID":"12345",
"fpMacID":"MACHINE 2",
"invoiceNo":"765434",
"salesOrderNo":"1289",
"webOrderNo":"657",
"taxClass":"7",
"invoiceDate":"10/12/2010",
"glPostingDate":"10/12/2010",
"invBaseAmt":"986.45",
"invVatAmt":"40.00",
"vatAmtinGL":"986.45",
"fpIssueDt":"10/12/2010",
"FPNo":"6784",
"fpIssueBaseAmt":"946.45",
"fpVatAmt":"986.45",
"variance":"946.45"
},
{
"division" : "151",
"fpRegID":"12345",
"fpMacID":"MACHINE 3",
"invoiceNo":"765434",
"salesOrderNo":"1289",
"webOrderNo":"657",
"taxClass":"7",
"invoiceDate":"10/12/2010",
"glPostingDate":"10/12/2010",
"invBaseAmt":"986.45",
"invVatAmt":"40.00",
"vatAmtinGL":"986.45",
"fpIssueDt":"10/12/2010",
"FPNo":"6784",
"fpIssueBaseAmt":"946.45",
"fpVatAmt":"986.45",
"variance":"946.45"
}];




var popupJsonStore = new Ext.data.JsonStore({
// url : '/survey.html',
fields : [
{name: 'division', mapping: 'division',type:'string'},
{name: 'fpRegID',type:'string'},
{name: 'fpMacID',type:'string'},
{name: 'invoiceNo',type:'string'},
{name: 'salesOrderNo',type:'string'},
{name: 'webOrderNo',type:'string'},
{name: 'taxClass',type:'string'},
{name: 'invoiceDate',type:'string'},
{name: 'glPostingDate',type:'string'},
{name: 'invBaseAmt',type:'string'},
{name: 'invVatAmt',type:'string'},
{name: 'vatAmtinGL',type:'string'},
{name: 'fpIssueDt',type:'string'},
{name: 'FPNo',type:'string'},
{name: 'fpIssueBaseAmt',type:'string'},
{name: 'fpVatAmt',type:'string'},
{name: 'variance',type:'string'}

]
});

iam calling this on click of a image from a grid and need to pass the value and show the grid, how to do this.

,columns: [
{
xtype:'actioncolumn'
,locked:true
,width:20
,align:'right'
,showHeader:false
,border:false
,id:'imgCol'
,cls:'headerColor'
,menuDisabled:true
,items: [{
icon: '../images/Drilldown_Icon.jpg' // Use a URL in the icon config
,tooltip: 'open Popup'
,sortable : false
,handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Month :" + rec.get('postingMonth'));
var popup = Ext.create('My.vatbrkdwnrpt.vatbreakdwnrpt_popup');
popup.openGrid(rec);
}
}]

Kindly provide a solution..

reej
23 Aug 2012, 1:38 AM
[QUOTE=reej;875137]file location :-> examples/vatbrkdwnrpt/vatbreakdwnrpt_popup.js
my js file code is as follows

Anybody can help me out please


No Answers...