When I include the html in config it does not work

Question

I am bit confused here, look at the code below:

var arrReqTplTest=["........................."];
var finalStudent=[];
finalStudent.push({
title: “Student Table”,
                collapsed: true,
                layout: 'fit',
                items: [
                    {
                        xtype: 'component',
                        itemId: 'StudentTablViewID-' + i,
                        html: arrReqTplTest

                    },
                    {
                        xtype: 'dataview',
                        itemId: 'StudentTable-' + i,
                        height: 200,
                        store: ‘studentDetailStore’,
                        //itemHeight: 70,
                        scrollable: false,           
                        itemSelector: 'div.wrap-requirements-' + i
                    }
                ]
            });
        }

        view.add(finalStudent);
})
}
});

This works fine but now look at the code below which does not work:

 var arrReqTplTest=["........................."];
    var finalStudent=[];
    finalStudent.push({
    title: “Student Table”,
                    collapsed: true,
                    layout: 'fit',
                    items: [
                        {
                            xtype: 'component',
                            itemId: 'StudentTablViewID-' + i,
                            config:{
                                    html:arrReqTplTest
                                }

                        },
                        {
                            xtype: 'dataview',
                            itemId: 'StudentTable-' + i,
                            height: 200,
                            store: ‘studentDetailStore’,
                            //itemHeight: 70,
                            scrollable: false,           
                            itemSelector: 'div.wrap-requirements-' + i
                        }
                    ]
                });
            }

            view.add(finalStudent);
    })
    }
    });

score 0 · Answer 1 · answered Apr 15 '14 at 15:36

0

its because "html" is part of component's config. you are doing it right with the first code:

html: thisIsYourVariableWithHtml //you can store the html value inside a variable or directly paste the value as string

But i will suggest to add:

styleHtmlContent: true,

to make sure that component really render the html value as html.

now in your second code you write:

config: {
    html: thisIsYourVariableWithHtml
}

you are defining custom config variable (dunno what other people call it, but this is my term when defining a property inside component's config object) in this case a object called config that have value "html" and by default sencha's component will not know what to do with this as it is your custom config variable.

answered Apr 15 '14 at 15:36

Rajan

312
3
13

But Sencha's component recognizes html as a config option. – Nick Div Apr 15 '14 at 15:42
well if you check by getMyComponent.getConfig().getHtml() yes it return the html value, (that is why i refer it as custom config variable) but it when it comes to running time and rendering the item on viewport sencha will refer to each of default config inside the "{}" such as: xtype, itemId and etc I've also checked the default config list of component specificly on the documentation and "config" does not appear http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Component. – Rajan Apr 15 '14 at 15:52

When I include the html in config it does not work

1 Answers1