When I include the html in config it does not work - sencha-touch-2.3

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);
})
}
});

Answer 1

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.