View Full Version : List with item description

19 Aug 2012, 2:47 PM
Hello, I'm trying to build a view that has a title bar at the top, and then for the content there's a list on the left, and a label on the right, with a description of the selected item. I am not set on using any specific components, that's just how I'm trying to implement it, if there's a better way to do this I would love to hear a suggestion. Anyway, my problem is that I want to make the list stretch to the full height of its parent, but I can't seem to figure out how to do that, if it's even possible. I tried using just a container of buttons instead of a list, but I ran into the same problem. Here's what I have so far: http://www.senchafiddle.com/#yeKbh
Any ideas or suggestions are appreciated, in regards to getting the list to stretch, or even just simply using a different component.


19 Aug 2012, 5:40 PM
The list is stretched the full length, if that is what you are asking. I wouldn't think there is a better way to do it than what you have now.

19 Aug 2012, 6:54 PM
Ah maybe I didn't explain it clearly, what I mean is each item in the list should expand to fill the entire list height. So while the list as a whole is filling up the entire height, the individual items are not. Is there a way to do that? For example if the list has a height of 1000px, with 4 items in it, I would want each item to be 250px high. I know it's possible to set the height of the items to a specific height, but I don't know of a dynamic setting.

22 Aug 2012, 3:58 AM
In case anyone else wants to do this, I figured out how to do it, at least if you know the number of items in the list, so the list size doesn't change. Well even if it does, you could add some javascript to modify the css (which is what I changed to get this to work). Anyway, I added the following to my list definition:

cls: 'main-menu-list'

Then I add the following to my css:

.main-menu-list .x-list-container {
height: 100%;
width: 100%;
position: absolute;

.main-menu-list .x-list-container .x-list-item {
height: 25%;

.main-menu-list .x-list-container .x-list-item .x-list-item-label {
height: 100%;

The height of 25% is what you'd want to modify, depending on the list size (my list is size 4).