添加列表到煎茶触控面板

Posted 2023-02-26

【中文标题】添加列表到煎茶触控面板

【英文标题】：Add list to Sencha touch panel

【发布时间】：2011-12-30 12:37:07

【问题描述】：

两天来我一直在尝试将列表或 NestedList 添加到我在 Sencha Touch 中的一个选项卡中，但我做不到:( 我的选项卡代码是：

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

我的列表代码是

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

当我添加类似

的内容时

items:[Darsnameh.coursesList]

应用程序页面是空白的，什么都没有显示，我应该添加什么来获得列表或选项卡中的嵌套列表？

【参考方案1】：

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

【讨论】：

我添加工具栏没有问题，但我无法在面板中添加任何列表或嵌套列表