Opening custom control as a model pop up

[nitija]

messagebox.jpgHi,

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.

Ext.define('Lancet.engine.asset.population.EditPopulation',
{
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', {

})]
});
win.show();
----------
----------

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.

[mitchellsimoens]

You can remove the model and modal configs you have on the Lancet.asset.populations.Grid definition.

[nitija]

Hi Thanks for reply. but I fixed it like this .,

Ext.define('Lancet.engine.asset.population.NewPopulation',
{
extend: 'Ext.button.Button',
alias: 'NewPopulation',
itemId: 'btnNewPopulation',
iconCls: 'new16',
disabled: false,
listeners: {
click: function () {
var populationGrid = Ext.create('Lancet.asset.populations.Grid', { preventHeader : true});
populationGrid.store.loadData([], false);
addpopWindow = new Ext.widget('window', {
title: 'Add Populations',
closeAction: 'destroy',
width: 650,
draggable: false,
height: 400,
closable: true,
layout: 'fit',
modal: false,
items: [populationGrid], buttons: [{
text: 'Close',
handler: function () {
addpopWindow.destroy();
}
}]
}).show();
}
}
});