South Panel Auto hide & East Panel Prop list & C. Pa

[Mohammed]

Dear Sir,

can anyone please give me detailed info on below 3 questions based on sample availble on
http://www.jackslocum.com/blog/examples/layout6.htm.

1. Is there a sample / doco on Properties panel, Jack created in east panel in above url. I couldnt find in the download copy. Is this going tobe in coming release...?

2. What is the property for setting the panel to be in Auto hide state by default. cant find in the layout library. In the complex layout example, for e.g. south panel is set to

south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
.......??? looking for something like autohide : true by default....?

3. I have a grid in centre panel with a list of items. when someone click an item, i would like to provide selected item details in a seperate tab with information related to that item. any idea how to handle this click event and create new tab (just like close me tab) with info.

Thank you in advance

[JeffHowden]

1. Is there a sample / doco on Properties panel, Jack created in east panel in above url. I couldnt find in the download copy. Is this going tobe in coming release...?

Yes, it's the PropsGrid class. You can find it in the documentation. Unfortunately, you won't find an example of it. However, if you check out how the Ext debug dialog is built, you'll see one implemented there.


2. What is the property for setting the panel to be in Auto hide state by default. cant find in the layout library. In the complex layout example, for e.g. south panel is set to

south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
.......??? looking for something like autohide : true by default....?

From the examples (/layout/complex.html), you want want to actually hide it:


layout.getRegion('west').hide();

However, I suspect all you want to do is collapse it:


layout.getRegion('west').collapse();

Substitute the region name in both examples to hide/collapse the desired region.


3. I have a grid in centre panel with a list of items. when someone click an item, i would like to provide selected item details in a seperate tab with information related to that item. any idea how to handle this click event and create new tab (just like close me tab) with info.

First off, you'll want to use a GridPanel for the grid instead of a ContentPanel. Then, on the grid, you'll want to add a listener to the rowclick event. Using that, it's a fairly simple matter to grab any information about the clicked row that you might need to use to dynamically retrieve content for the new tab (whether that be via AJAX or by setting the src of an iframe). The rowclick event handler will be passed the following arguments: the grid, the index of the row that was clicked, and the event object itself. Using that, you can grab the id of the row:


var dataId = ds.data.items[rowIndex][reader.meta.id];

For relevant text to use on the tab, I also keep a property called "title" in my reader config that identifies the column in my column model to use as the title. I grab the contents of that cell, like so:


var title = ds.data.items[rowIndex].data[reader.meta.title];

Now, armed with these two things (and a URL for an iframe), I call an addPanel() method defined on the same singleton that I created to init() my layout/grid/etc.


var tabPanel = Example.addPanel(dataId, title, url);

The actual addPanel() method looks like this (assuming the variable "layout" is a reference to your actual BorderLayout instance):


, addPanel : function(id, title, url) {
if(!this.layout.showPanel('center-' + id)) {
var wrapper = document.createElement('div');
wrapper.id = 'center-' + id;
var iframe = document.createElement('iframe');
iframe.setAttribute('frameborder', 'no');
iframe.frameBorder = 0;
iframe.setAttribute('name', 'center-' + id + '-frame');
iframe.setAttribute('id', 'center-' + id + '-frame');
wrapper.appendChild(iframe);
document.body.appendChild(wrapper);
iframe.src = url;
panel = this.layout.add('center', new Ext.ContentPanel(
'center-' + id
, {
title: title
, closable: true
, fitToFrame: true
, resizeEl: 'center-' + id + '-frame'
})
);
return panel;
}
else
return this.layout.findPanel('center-' + id);
}

Obviously, if you want to do something using AJAX instead to grab the contents of the new panel, then you'd look into using the setUrl() method of the ContentPanel class or maybe even hand-rolling your own.[/list][/i]

[Mohammed]

Thanks Jeff...followed what you have said...

1. layout.getRegion('South').collapse(); - > yes, but i think there is a bug..only south panel in collapse state doesnt occupy complete space...

http://www.abdulsalam.info/yui/south_panel_gridpanel_settings.JPG

2. you asked me to create gridpanel

yes, created...


var myGrid = new Ext.grid.Grid("center1");
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true}));
layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
//layout.add('center', new Ext.ContentPanel('center1', {title: 'welcome to xyz', closable: false}));

layout.add('center', new Ext.GridPanel(myGrid, {title: 'MY Grid'}));
layout.add('center', new Ext.ContentPanel('center2', {title: 'Close Me', closable: true}));
layout.getRegion('center').showPanel('center1');

and added my grid into gridpanel section as below...


<div id="center1"
class="x-layout-inactive-content"
style="width:200px;height:200px;overflow:hidden;">

<div id="topic-grid"
style="border:1px solid #99bbe8;overflow: hidden; width: 765px; height: 300px;"></div>
</div>


added but have a look at below image...i end up with this error...is there anything wrong in creating GridPanel...i surfed the forums...the same question has been asked many many times...but no solid answer...

http://www.abdulsalam.info/yui/Grid_Panel_Error_Msg.JPG

before when i created grid in Layout Panel i used to atleast see my grid. now i dont see my grid at all with this funny error message...

http://www.abdulsalam.info/yui/grid_panel.jpg

any help...thank you in advance

[dfenwick]

- To apply a title to a collapsed north/south panel, you can add the collapsedTitle: 'Blah' config option to your ContentPanel. To apply it to an east/west panel you need to add a custom style to your stylesheet for x-layout-collapsed-east or x-layout-collapsed-west and you need to add a background image. That's because there's currently no css style for providing vertical text in a browser. Example:


x-layout-collapsed-west {
background-image: url(myimage.gif);
background-repeat: no-repeat;
background-position: center;
}

You have other issues with your layout. You need to make sure your div nesting is correct with respect to where you're placing your widgets. Post both your .js and your .html files and we can have a look to see where things are going wrong.

As far as your grid is concerned, did you copy the static floating grid example from the examples directory? If so, it's nested in a resizable component. That ... bar at the bottom of your grid is the resizable component. I take it you don't want that, so what you need to do is nest the grid component's div within a parent div component that will act as the panel. Then create a GridPanel rather than a ContentPanel to put the grid in. You can find a good example of creating a grid by searching for 'grid tutorial' in Jack's forum searcher at: http://www.yui-ext.com/deploy/ext-1.0-alpha3/examples/form/forum-search.html
[/code]

[Mohammed]

many thanks dfenwick

i have posted my outcomes in below forum url for new bees...

http://www.yui-ext.com/forum/viewtopic.php?p=19794#19794

Mohammed G
www.abdulsalam.info