Nested List Item Not Expanding to Fit Contents

REQUIRED INFORMATION

Ext version tested:

• Sencha Touch. 2.1.0

Browser versions tested against:

• Google Chrome Version 24.0.1312.52

DOCTYPE tested against:

• html

Description:

• When using the nested list component, if the contents of an item consists of more than a couple of lines, the nested list does not expand to fit the contents. The contents "bleeds" over the item separators.

Steps to reproduce the problem:

• Edit the "Kitchen Sink" example code, and add a getItemTextTpl which contains some "<br>" items to make it span more than a couple of lines.

The result that was expected:

• Expect the nested list item to expand vertically to accommodate the contents.

The result that occurs instead:

• Past the first level of list items, the contents of the item "bleeds" outside of the nested list separator.

Test Case:

Code:

---

/**
 * Demonstrates a NestedList, which uses a TreeStore to drill down through hierarchical data
 */
Ext.require('Ext.data.TreeStore', function() {
    Ext.define('Kitchensink.view.NestedList', {
        requires: ['Kitchensink.view.EditorPanel', 'Kitchensink.model.Cars', 'Ext.layout.Fit'],
        extend: 'Ext.Container',
        config: {
            layout: 'fit',
            items: [{
                xtype: 'nestedlist',
                store: {
                    type: 'tree',
                    id: 'NestedListStore',
                    model: 'Kitchensink.model.Cars',
                    root: {},
                    proxy: {
                        type: 'ajax',
                        url: 'carregions.json'
                    }
                },
                //This is the line that is added.
                getItemTextTpl: function() {
                            return '{text}<br>Second test line<br>Third test line<br>Fourth test line<br>Fifth test line';
                    },
                displayField: 'text',
                listeners: {
                    leafitemtap: function(me, list, index, item) {
                        var editorPanel = Ext.getCmp('editorPanel') || new Kitchensink.view.EditorPanel();
                        editorPanel.setRecord(list.getStore().getAt(index));
                        if (!editorPanel.getParent()) {
                            Ext.Viewport.add(editorPanel);
                        }
                        editorPanel.show();
                    }
                }
            }]
        },
    });
});

---

HELPFUL INFORMATION

Screenshot or Video:

Attachment 41565
See this URL for live test case: http://

Debugging already done:

• Reproduced this outside of our existing code to eliminate any potential impacts of our code and stylesheet.

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Linux
• WinXP Pro

Can I get a full test case? The test you have given is only part of it. Also, it's not done in the best way and also is overnesting.

I don't understand. I've added one line to the Kitchen sink example. Is that what made it "overnesting"?

To reproduce, you add that one line to the kitchen sink example.

Well, just like the Sencha documentation, your answer was brief, and contained little useful information.


Can you tell me what more you need than adding ONE line to the kitchen sink example? I fail to see how it could be simpler.

I am having the same problem. I too am able to reproduce it with the Kitchen Sink app, after trying the example English posted.

Is there any fix or workaround for this? Please advise, this is kind of a show stopper for our app.

For the sake of other people coming across this issue, we have found the answer.

It has been addressed in this bug report (which wasn't summarily and cryptically dismissed):
http://www.sencha.com/forum/showthread.php?248999

You have to add this to the nested list (or list):

Code:

---

listConfig: {
  variableHeights: true
}

---

The documentation wrongly states that this defaults to true. It doesn't. It defaults to false.