PDA

View Full Version : Grid in new content panel



stalin
23 Apr 2007, 11:41 PM
Hi Friends..
I am using ext-1.0-beta1..Now am working with grid. Grid is working perfect with my database. But I need to display result grid in a new content panel. Currently its displying in div only. What shaould i do to get it in another contentpanel.



var grid = new Ext.grid.Grid('centerframe', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:true
});


centerframe is the div name where grid currently loading.. What i am looking for is ... i need to load it in another conent panel say centerPanel which is having an iframe called Centeriframe... Can anybody help me how its works and whst should i do for this ?????

Stalin

Animal
23 Apr 2007, 11:44 PM
Use a GridPanel

stalin
23 Apr 2007, 11:54 PM
Hi Animal

Thankx for reply....can u tell how can i use a Grid Panel.....Basically am using Layout paenl inside iam using grid .what i mean is on subit a search ineed to load the grid ina different contel panel....Now its loading in same panel within a div.....I need to get it in another panel

Stalin

Animal
24 Apr 2007, 3:25 AM
Do not use a ContentPanel. Create the gird in a div, and then create a GridPanel from that Grid.

http://extjs.com/deploy/ext/docs/output/Ext.GridPanel.html

stalin
25 Apr 2007, 12:24 AM
Hi Animal

I trieded witha grid panel too..i didt get the reuslt i required. Let me make more claer what i really looking for .


layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('srchNorth',{title: 'Search',fitToFrame:true, autoCreate: {tag: 'iframe', id: 'srchframe', name: 'srchframe', frameborder: 'no' }}));
layout.add('south', new Ext.ContentPanel('srchSouth',{title: 'Search',fitToFrame:true, autoCreate: {tag: 'iframe', id: 'southframe', name: 'southframe', frameborder: 'no' }}));
// layout.add('center', new Ext.ContentPanel('srchCenter',{title: 'Search',fitToFrame:true, autoCreate: {tag: 'iframe', id: 'centerframe', name: 'centerframe', frameborder: 'no' }}));


layout.add('center', srGridPanel = new Ext.GridPanel('sr_grid', {title: 'Search',fitToFrame:true }));

layout.endUpdate();


Basically i hve a search option in my North panel region. On submit search iam able to get the result Grid in the North panel itself. Noe i am trying to get that grid in Center panel. when submit the North serch option. I ma not so sure how can i do this . i created a center grid
Panel insead of content panel and given the grid div id as grid panel id. No effects . Can u help me ???

ismoore
25 Apr 2007, 1:21 AM
You have missed one fundamental thing - you are using the wrong arguments! YOu need to create the grid and pass that to the grid panel.
Here is an example from working code as I am doing something similar in the old Ext:


var grid = new YAHOO.ext.grid.Grid(divid, dataModel, colModel, selectionModel);
grid.trackMouseOver = true
grid.render()
....
var vp = layout.add('center', new YAHOO.ext.GridPanel(grid, {title:"grid"}));


I haven't upgraded to 1.0 yet but I believe the args are identical

Ian

stalin
26 Apr 2007, 1:09 AM
Hi friends

I haven't solved out the problem. Basically I have a North Panel and Center Panel.I am calling a search page in an i frame of North panel. This search page having an action page where the grid cod e has written. SO on submit search page Grid being generated and display in the north panel itself in a specified div.

I need to display the grid in the center panel instead of north panel div. I couldt accomplish the task yet.

What i have done
1. I created a Grid panel in the main layout and removed the Center content panel.


layout.add('center', srGridPanel = new Ext.GridPanel('sr_grid', {title: 'Search',fitToFrame:true }));

2. I tried out with

var grid = new Ext.grid.Grid(sr_grid, dataModel, colModel, selectionModel);
grid.trackMouseOver = true
grid.render()
var vp = layout.add('center', new Ext.GridPanel(grid, {title:"grid"}));


here error am getting is sr_grid is not defined...
My doubt is ,
Grid relted codes are there in gridmain.php file which is tha action page of search page in the north panel. Is it possible to solve this issue ? using above code component. I need bit more help regarding this ..please somebody help me
Stalin

ismoore
26 Apr 2007, 2:39 AM
Do you have an div tag in the body of your iframe (if this is where you are placing the grid) with an id of 'sr_grid'?

if you add

<div id="sr_grid" />
into your html body, you should then find that it works.

If you look at the my response you have to make sure that you have defined a unique element (ideally just a div tag) for each of the grids that you are using. If these are to be done at runtime, then add them to the dom.

Hope this helps
Ian

stalin
26 Apr 2007, 3:24 AM
Hi friends

Thankx for reply....Here is my Code please just have a look...

Layout page with grid panel


<script type="text/javascript">
SearchPage = function(){
var layout; var innerLayout; var srGridPanel;var sr_grid;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
modal:true,
north: {
split:false,
shadow:true,
initialSize:75,
autoScroll:false
},
south: {
split:false,
shadow:true,
titlebar: true,
autoScroll:false,
initialSize:200
},
center: {
titlebar: true,
shadow:true,
autoScroll:false,
animate: true
}
}
);
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('srchNorth',{title: 'Search',fitToFrame:true, autoCreate: {tag: 'iframe', id: 'srchframe', name: 'srchframe', frameborder: 'no' }}));
layout.add('south', new Ext.ContentPanel('srchSouth',{title: 'Search',fitToFrame:true, autoCreate: {tag: 'iframe', id: 'southframe', name: 'southframe', frameborder: 'no' }}));
// layout.add('center', new Ext.ContentPanel('srchCenter',{title: 'Search',fitToFrame:true, autoCreate: {tag: 'iframe', id: 'centerframe', name: 'centerframe', frameborder: 'no' }}));
// -----------------------------------------------------
var grid = new Ext.grid.Grid(sr_grid, dataModel, colModel, selectionModel);
grid.trackMouseOver = true
grid.render()
var vp = layout.add('center', new Ext.GridPanel(grid, {title:"grid"}));
//--------------------------------------------------------
layout.endUpdate();
layout.getRegion('east').hide();
layout.getRegion('south').hide();
Ext.get("srchframe").dom.src= 'search.htm';

},
getLayout : function(){
return layout;
}
}
}();
Ext.EventManager.onDocumentReady(SearchPage.init, SearchPage, true);
</script>
</head>
<body>
<div id ="container">
<div id="sr_grid" class="x-layout-inactive-content"></div>
</div>

graidmain.php grid generting page which is the action page of search.php


<script type="text/javascript">
var myGrid = function() {
return {
init: function() {
Ext.QuickTips.init();
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'grid_services2.php',method: 'POST'}),
reader: new Ext.data.JsonReader({
root: 'mygrid',
totalProperty: 'totalCount',
id: 'Servicenumber'
},
[
{name: 'serviceid', mapping: 'serviceid', type: 'int'},
{name: 'Servicenumber', mapping: 'Servicenumber', type: 'string'},
]),

baseParams:{
name:'<?php echo $from; ?>',
name1:'<?php echo $to; ?>',
},

remoteSort: true
});
ds.setDefaultSort('TravelsName', 'asc');
var cm = new Ext.grid.ColumnModel([
{header: "From", dataIndex: 'Source', width: 140, sortable: true, align: 'left'},
{header: "To", dataIndex: 'Destination', width: 140, sortable: true},
]);
cm.defaultSortable = true;
var grid = new Ext.grid.Grid('centerframe', { //grid DIV
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:true
});
// render the Grid
grid.render();
var gridFoot = grid.getView().getFooterPanel(true);
var pagbar = new Ext.PagingToolbar(gridFoot, ds, {pageSize: 12});
ds.load({params:{start:0, limit:12 }});
}
};
}();
Ext.EventManager.onDocumentReady(myGrid.init, myGrid, true);
</script>

let me kno the way i am progresing is correct or not ? please guide me
thankx

ismoore
26 Apr 2007, 4:03 AM
OK I have to say I don't have time to give a decent answer on this but here are a few tips:

var grid = new Ext.grid.Grid(sr_grid, dataModel, colModel, selectionModel);
should be
var grid = new Ext.grid.Grid("sr_grid", dataModel, colModel, selectionModel);

I am not sure about autocreating iframes, though I can see that what you are trying to do is add a page to one of the pages. Use div tags instead. Unless you really need the separate page for the help search. You could include this in all of your current page so you don't need to autocreate the tags or else get php to include the page if it is used elsewhere). This is not absolutely necessary but it will help to work out what is going wrong.

I am not sure where you are defining the data models etc. One thing you could consider is that when the search button is clicked, it is then that you create and add the grid view to the centre panel.

See if any of this helps

dfenwick
26 Apr 2007, 4:08 AM
From what I can tell, you have a layout with north, south, and center regions. Your north or south panels are ContentPanel objects and they have some content that does some processing. Eventually you want a grid with results to show up in your center region. If this is what you're trying to accomplish, what I'd suggest is pre-creating your Grid object along with your Store and ColumnModel objects in your main code and render it with a GridPanel. This will leave a blank Grid in your center region as a GridPanel. Just don't call the load() function on the Store.

Then hook the 'beforeload' event on your Store object. In that function, do something like this:


ds.on('beforeload', function() {
ds.baseParams = {
name: (do something to get retrieve the name from your search options here),
name1: (do something to get retrieve the name from your search options here)
};
});

Now you have a beforeload event hooked to your search mechanism that will pass the parameters over to your data retrieval script. Then turn your gridmain.php into a data loading script that simply returns JSON data to populate the Grid. This is pretty much the way the Grid is designed to be used. You're greatly over complicating things by moving your a combination of Javascript and PHP to the server for delivery back to the client. You need to think of PHP as your data delivery engine as much as possible. All it should really be doing (other than possibly the initial delivery of your main page) is delivering data back to your data aware Ext widgets. That concept is really important to grasp. As soon as you get it, the entire delivery process will be incredibly simple and transparent, and you become backend independent. You could then just as easily replace the backend PHP data delivery with a Java servlet, ColdFusion backend, or anything else that can simply deliver JSON data objects to your Ext widgets.

stalin
26 Apr 2007, 4:33 AM
thanks Ian and all

Here one differnce i Noticed is that iam Using JSON based Grid where dataModel and relted things r not metioned. Its based on Xml grid. So the code u metioned shuld be chaged ?? Iam not sure ...... can u give some more tips realated this
stalin

stalin
26 Apr 2007, 4:43 AM
Hi Ian and all

I am using JSON based Grid wher Data model and relted things are not metioned. Data Model is related to Xml based Grid. am not sure ...can u give bit more tips
Stalin

stalin
26 Apr 2007, 4:56 AM
thanks Ian and all

Here one differnce i Noticed is that iam Using JSON based Grid where dataModel and relted things r not metioned. Its based on Xml grid. So the code u metioned shuld be chaged ?? Iam not sure ...... can u give some more tips realated this
stalin

tryanDLS
26 Apr 2007, 7:40 AM
Look at the grid example that uses xml to see how the difference btwn Json and xml.

stalin
8 May 2007, 11:47 PM
Hi all

I stated my problem some day back.. But still i am stuck up in that issue. I have gone through many examples but combination of content panel and grid panel i did't find or i did't get much from that. I have gone through post llike http://extjs.com/forum/showthread.php?t=3606 by humpdi. I also need to get how to add a Grid panel instead of a center content panel along with east west south north panels.

i got an advice like


From what I can tell, you have a layout with north, south, and center regions. Your north or south panels are ContentPanel objects and they have some content that does some processing. Eventually you want a grid with results to show up in your center region. If this is what you're trying to accomplish, what I'd suggest is pre-creating your Grid object along with your Store and ColumnModel objects in your main code and render it with a GridPanel. This will leave a blank Grid in your center region as a GridPanel. Just don't call the load() function on the Store.

Then hook the 'beforeload' event on your Store object. In that function, do something like this:

Code:

ds.on('beforeload', function() {
ds.baseParams = {
name: (do something to get retrieve the name from your search options here),
name1: (do something to get retrieve the name from your search options here)
};
});

Now you have a beforeload event hooked to your search mechanism that will pass the parameters over to your data retrieval script. Then turn your gridmain.php into a data loading script that simply returns JSON data to populate the Grid. This is pretty much the way the Grid is designed to be used. You're greatly over complicating things by moving your a combination of Javascript and PHP to the server for delivery back to the client. You need to think of PHP as your data delivery engine as much as possible. All it should really be doing (other than possibly the initial delivery of your main page) is delivering data back to your data aware Ext widgets. That concept is really important to grasp. As soon as you get it, the entire delivery process will be incredibly simple and transparent, and you become backend independent. You could then just as easily replace the backend PHP data delivery with a Java servlet, ColdFusion backend, or anything else that can simply deliver JSON data objects to your Ext widgets.

I really thankfull to him but i could't progress much. I got an idea from this reply but i need bit more helps how to implement in a step by step manner .

Please Kindly help me what all steps i should do to
1. Add a Grid Panel in the center
2. get my result grid in Center Grid panel
Thanku

stalin
9 May 2007, 6:26 AM
Hi all

I tried to add a GridPanel like this but doesnt work.


<script type="text/javascript">
Home = function(){
var SrGridpanel;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:true,
initialSize: 50,
maxSize: 200,
titlebar: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
margins:{left:3,top:50,right:3,bottom:3}
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header', 'North'));
layout.add('south', new Ext.ContentPanel('footer', {title: 'South', closable: true}));
layout.add('center', SrGridpanel=new Ext.GridPanel('sr_grid', {title: 'Search',fitToFrame:true }));
layout.endUpdate();
},
};

}();
Ext.EventManager.onDocumentReady(Home.init, Home, true);
</script>

</head>

<body>
<script type="text/javascript" src="../corejs/ext-1.0-beta1/examples/examples.js"></script><!-- EXAMPLES -->
<div id ="container">
<div id="header" class="x-layout-inactive-content"></div>
<div id="footer" class="x-layout-inactive-content"></div>
<div id="sr_grid" class="x-layout-inactive-content"></div>
</div>
</body>
</html>

plese let me know the way i tried is wrong or not. Please respond .

stalin
10 May 2007, 12:48 AM
Hi all

Please anybody help me to add a Grid panel in the center region. I need some more help .
Stalin

jsakalos
10 May 2007, 1:26 AM
Home = function(){
var SrGridpanel;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:true,
initialSize: 50,
maxSize: 200,
titlebar: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
margins:{left:3,top:50,right:3,bottom:3}
}
});

var grid = new Ext.grid.Grid('sr_grid', {
// ....
// your grid configuration comes here
// ....
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header', 'North'));
layout.add('south', new Ext.ContentPanel('footer', {title: 'South', closable: true}));
layout.add('center', new Ext.GridPanel(grid, {
// ...
// your GridPanel configuration comes here
// ...
});
layout.endUpdate();
},
};

}();