Add list to Sencha touch panel

Question

I've been trying for two days to add a list or NestedList to one of my tabs in Sencha Touch and I can't do it :( My tab code is:

Darsnameh.views.Coursecard = Ext.extend(Ext.Panel,{
    title: "Courses",
    iconCls: "bookmarks",
    style:"background:red",
    dockedItems:[{
        xtype:'toolbar',
        title:'Courses'
    }]
})

Ext.reg('coursecard',Darsnameh.views.Coursecard);

and my list code is

Ext.regModel('Contact',{
    fields:['firstName','lastName']
});

Darsnameh.CoursesStore = new Ext.data.Store({
    model: 'Contact',
    data:[
        {firstName:'Domino', lastName:'Derval' },
        {firstName:'Domino2', lastName:'Derval2' },
        {firstName:'Domino3', lastName:'Derval3' },
        {firstName:'Domino4', lastName:'Derval4' },
        {firstName:'Domino5', lastName:'Derval5' },
        {firstName:'Domino6', lastName:'Derval6' }
    ]

});
Darsnameh.coursesList = new Ext.List({
    id:'courseslist',
    store: Darsnameh.CoursesStore,
    itemTpl:'<div class="contact">{firstName}</div>'
});

When I add anything like

items:[Darsnameh.coursesList]

the application page is blank and nothing is shown, what should I add to have the list, or nested list in a tab?

user1070642 user1070642 · Accepted Answer · 2011-12-30T13:03:08

In accordance to my previous answer i've added how to create list panel... just have a look at this

      NotesApp.views.noteEditor = new Ext.form.FormPanel({
        id:'noteEditor',
        items: [
            {
                xtype: 'textfield',
                name: 'title',
                label: 'Title',
                required: true
            },
            {
                xtype: 'textareafield',
                name: 'narrative',
                label: 'Narrative'
            } ,
        ],
          dockedItems: [
            NotesApp.views.noteEditorTopToolbar,
        ]
      });

      NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
          title: 'Edit Note',
          items: [
              {
                  text: 'Save',
                  ui: 'action',
                  handler: function () {
                            var noteEditor = NotesApp.views.noteEditor;
                            var currentNote = noteEditor.getRecord();
                            noteEditor.updateRecord(currentNote);
                            var errors = currentNote.validate();
                            if (!errors.isValid()) {
                                Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
                                return;
                            }
                            var notesList = NotesApp.views.notesList;
                            var notesStore = notesList.getStore(); // where i've declared my store
                            if (notesStore.findRecord('id', currentNote.data.id) === null) {
                                notesStore.add(currentNote);
                            } else {
                                currentNote.setDirty();
                            }
                            notesStore.sync();
                  }
              }
          ]
      }); 

            var NotesStore=new Ext.data.Store({
                model: 'Note',
                storeId:'noteid',
                sorters: [{
                    property: 'date',
                    direction: 'DESC'
                }],
                proxy: {
                    type: 'localstorage',
                    id: 'notes-app-localstore'
                },
           });  
            NotesApp.views.notesList = new Ext.List({
                id: 'notesList',
                store: NotesStore,

                itemTpl: '<div class="list-item-title">{title}</div>'+
                    '<div class="list-item-narrative">{narrative}</div>',
                onItemDisclosure:function(listrecord){
                 var selectedNote = listrecord;
                  NotesApp.views.noteEditor.load(selectedNote);
                  NotesApp.views.viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
                },
                 listeners: {
                        'render': function (thisComponent) {
                             thisComponent.getStore().load();
                        }
              }    
            });

Add list to Sencha touch panel

1 Answers