Sencha touch 2 - Show data in DataView

Question

I am new in ExtJS, and I already, have an example of doctors list but, in doctor detail page, Its look like a populated form, Here is my view file:

Ext.define("GS.view.DoctorView", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.doctorview",
config:{
    scrollable:'vertical'
},
initialize: function () {

    this.callParent(arguments);

    var backButton = {
        xtype: "button",
        ui: "back",
        text: "Back List",
        handler: this.onBackButtonTap,
        scope: this
    };

    var topToolbar = {
        xtype: "toolbar",
        docked: "top",
        title: "Doctor Profile",
        items: [
            backButton,
            { xtype: "spacer" }
        ]
    };

    var bottomToolbar = {
        xtype: "toolbar",
        docked: "bottom",
        items: [

        ]
    };

    var doctorNameView = {
        xtype: 'textfield',
        name: 'title',
        label: 'Title',
        required: true
    };

    var doctorDescView = {
        xtype: 'textareafield',
        name: 'narrative',
        label: 'Narrative'
    };

    this.add([
        topToolbar,
        { xtype: "fieldset",
            items: [doctorNameView, doctorDescView]
        },
        bottomToolbar
    ]);
},
onBackButtonTap: function () {
    this.fireEvent("backToListCommand", this);
}
});

Which steps I take to convert it to dataview, or how to use my custom HTML?

ThinkFloyd ThinkFloyd · Accepted Answer · 2013-02-18T04:49:41

Firstly, your question is very vague so you should go through some dataview tutorial or article to understand why you really need a data view here because list is a dataview and form is what you are creating as details view.

http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2

http://docs.sencha.com/touch/2-1/#!/guide/dataview

To use your custom HTML you have to use xtemplate

http://docs.sencha.com/touch/2-1/#!/api/Ext.XTemplate

Sencha touch 2 - Show data in DataView

1 Answers