Results 1 to 6 of 6

Thread: Popup Window

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    10

    Default Popup Window

    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

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    10

    Default Popup Window

    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

  3. #3
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default use Ext.define()

    Hi reej,

    You can achieve this by Ext.define(), here is sample code define a MyClassWindow into your window.js file
    Code:
    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
    ee also http://docs.sencha.com/ext-js/4-1/#!...-method-define
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    10

    Default

    Thank you sword.. It would be so helpfull to me.. I'll try it .
    Thanks a lot.

    Thanks,
    Reej.M

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    10

    Default

    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..

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    10

    Default

    [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...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •