PDA

View Full Version : Datagrid in tab or my own div



joefox
31 Dec 2009, 9:35 PM
So I have my layout, and I have a event listener that fires when someone opens a tab. HOwever, i dont know how to then create a grid inside one of my tabs.

I see the code for how to create a grid when the page comes up, but i dont want the grid to be created until they open one of my tabs.

Any ideas where to start, or how to do this?

Thanks again!

joefox
1 Jan 2010, 8:50 AM
anyone?

Animal
1 Jan 2010, 9:07 AM
I think that every one is too fed up with this one because


This has been asked and answered several times a week since as long as I can remember
It's in the FAQ
it's in the API docs
After nearly a year of learning the principles of simply adding Components to Containers you ought to be able to do this.

joefox
1 Jan 2010, 10:13 AM
I did read some of those, and i still need help, that is why i posted.
Maybe I am going about this adding items to current items all wrong, this is what I have, but dosent work, i cant get a button or hyperlink click to add the component...


<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var vp = new Ext.Viewport({
layout: 'border',
items:[{
xtype:'form',
region:'center',
contentEl: 'html_buttons',
title:'Test',
labelAlign:'top',
items:[{
xtype:'panel',
title:'Panel 1',
items:[{
layout:"form",
items:[{
xtype:'textfield',
fieldLabel:'Text Field 1',
name:'textfield1'
}]
}]
}]
}]
});
});
//Function To Add Items
function testing(){
var pa2 = new Ext.Panel({
title:'Panel 2',
items:[{
layout:"form",
items:[{
xtype:'textfield',
fieldLabel:'Text Field 2',
name:'textfield2'
}]
}]
});
vp.getComponent(0).add(pa2);
vp.getComponent(0).doLayout();
}
</script>
</head>
<body>
<div id="html_buttons">
<input type="button" value="addme" onclick="testing()">
<a href="javascript: void(0)" onclick="testing()">Testing Button Click</a>
</div>
</body>
</html>

Condor
2 Jan 2010, 1:33 AM
I see the code for how to create a grid when the page comes up, but i dont want the grid to be created until they open one of my tabs.

Simply define your grids as tabs of the tabpanel (no need for extra panels or divs!).

The trick is to configure your tabpanel with deferredRender:true (which is the default). This means that the tab will only be rendered when it is selected.

joefox
2 Jan 2010, 9:11 AM
Is there any way, for me to do what I am trying to do above?
I want to add items / create items from a function click hyperlink in normal html

Condor
2 Jan 2010, 9:53 AM
Your code would already work if you didn't try to use a private variable 'vp' outside it's scope.

Either assign the viewport to a global variable or assign it an id and use Ext.getCmp('id-of-viewport').

joefox
2 Jan 2010, 10:23 AM
Thank you very much, that did it.
I am still new to the whole extjs, and I am glad you helped out.

Is a remove item just the same? but .remove?
Also, is there a check I can do to make sure they dont push the button again, and make another instance of this?

Here was the final working code.


<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var vp = new Ext.Viewport({
layout: 'border',
items:[{
xtype:'form',
id:'my_viewport',
region:'center',
contentEl: 'html_buttons',
title:'Test',
labelAlign:'top',
items:[{
xtype:'panel',
title:'Panel 1',
items:[{
layout:"form",
items:[{
xtype:'textfield',
fieldLabel:'Text Field 1',
name:'textfield1'
}]
}]
}]
}]
});
});

function testing(){
var pa2 = new Ext.Panel({
title:'Panel 2',
items:[{
layout:"form",
items:[{
xtype:'textfield',
fieldLabel:'Text Field 2',
name:'textfield2'
}]
}]
});
Ext.getCmp('my_viewport').add(pa2);
Ext.getCmp('my_viewport').doLayout();
}
</script>
</head>
<body>
<div id="html_buttons">
<input type="button" value="addme" onClick="testing()">
<a href="javascript: void(0)" onClick="testing()">Testing Button Click</a>
</div>
</body>
</html>

Condor
2 Jan 2010, 10:27 AM
1. Yes, you can also remove() components.
2. Give your panel an id so you can use Ext.getCmp('id-of-panel') to check if it already exists.

joefox
2 Jan 2010, 11:14 AM
When I try this Ext.getCmp('id-of-panel') and try to get my panel id, if it dosent exsist, javascript throws and error :(

Condor
2 Jan 2010, 11:58 AM
When I try this Ext.getCmp('id-of-panel') and try to get my panel id, if it dosent exsist, javascript throws and error :(

It think you are doing something wrong. Can you post your code?

joefox
2 Jan 2010, 4:04 PM
It think you are doing something wrong. Can you post your code?

Here you go:



function testing(){
if(Ext.getCmp('my_viewport') == "")
{
var pa2 = new Ext.Panel({
title:'Panel 2',
items:[{
layout:"form",
items:[{
xtype:'textfield',
fieldLabel:'Text Field 2',
name:'textfield2'
}]
}]
});
Ext.getCmp('my_viewport').add(pa2);
Ext.getCmp('my_viewport').doLayout();
}
else
{
alert("On Page Already Test"); //Throw Test Alert Info Already On Page
}
}

joefox
2 Jan 2010, 7:52 PM
Once I get this working, the main focus of this was I wnated to add a grid into a tab's div
however i wanted the grid to be sized per the grids size...
does that make sense?

Animal
3 Jan 2010, 12:39 AM
No it does not make sense. Adding to a tab's div.

You have been told in this thread.

You have been told in the docs

You have been told in the FAQ

Add the Grid to the TabPanel.