I am creating below control . On some different page i want this control to be displayed as "Model popup".How can i achieve this ?
Ext.define('Lancet.asset.populations.Grid', {
extend: 'Ext.grid.Panel',
id: 'populationGrid',
store: store,
model: 'StepViewModel',
modal: true,
stateful: true,
stateId: 'stateGrid',
columns: [
text: 'Step Name',
dataIndex: 'StepName',
menuDisabled: true,
sortable: false,
enableColLock: true,
enableColumnMove: false,
autoExpandColumn: true,
// locked: true,
width: 75
On some different page , on button click i want above control to be diaplayed. Below is code for Button click.

extend: 'Ext.button.Button',
alias: 'EditPopulation',
itemId: 'btnEditPopulation',
itemId: 'btnEditPopulation',
iconCls: 'edit16',
disabled: false,
listeners: {
click: function () {
win = new Ext.Window(
layout: 'fit',
width: 500,
height: 300,
modal: true,
isPanel: true,
collapsed: true,
frame: true,
closeAction: 'hide',
items: [
Ext.create('Lancet.asset.populations.Grid', {


Problem is , it create instance of above control on button click , but two windows are displayed. I want only control to be loaded and Ext.Window which acts as a loader or parent should be hidden.
kindly advice.
Thanks in advance.