Results 1 to 9 of 9

Thread: MVC Application, NestedList

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    10

    Question MVC Application, NestedList

    Hi

    I'm trying to load a NestedList into a panel. But it only shows my Title bar and blank content.
    If I load a List (like in the tutorial) it works.
    MainView.js:
    Code:
    MyApp.views.MainView = Ext.extend(Ext.Panel, {    fullscreen: true,
        layout: 'card',
        cardSwitchAnimation: 'slide',
        initComponent: function () {
    
    
        this.newButton = new Ext.Button(
        {
            text: 'New',
            ui: 'action',
            handler: this.onNew,
            scope: this
        });//newButton
    
    
        this.topToolbar = new Ext.Toolbar(
        {
            title: 'MyApp',
            items: 
            [
                { xtype: 'spacer' },
                this.newButton
            ]
        });//topToolbar
    
    
        this.dockedItems = [this.topToolbar];
    
    
    
    
    
    
        Ext.apply(MyApp.views, 
        {
            productionsListView: new MyApp.views.ProductionListView({ productionStore: MyApp.stores.productionStore })
        });
        this.items = [
            MyApp.views.productionsListView
        ]
    
    
        MyApp.views.MainView.superclass.initComponent.call(this);
    
    
        this.on('render', function () 
        {
            MyApp.stores.productionStore.load();
        });
            
            
        },//initComponent
        
        onNew: function () 
        {
            Ext.dispatch(
            {
                controller: MyApp.controllers.MyAppController,
                action: 'new'
            });
        }
    
    
        
    });
    ProductionListView.js:
    Code:
    MyApp.views.ProductionListView = Ext.extend(Ext.Panel, {
    
    
        productionStore: Ext.emptyFn,
        productionList: Ext.emptyFn,
    
    
        layout: 'fit',
    
    
        initComponent: function () 
        {
    
    
    
    
    ////////
            this.productionList2 = new Ext.extend(Ext.NestedList, 
            {
                //fullscreen: true,
                title: 'Title',
                store: this.productionStore,
                useTitleAsBackText: false,
                getDetailCard: function(item, parent) 
                {
                    var itemData = item.attributes.record.data,
                    parentData = parent.attributes.record.data,
                    detailCard = new Ext.Panel(
                    {
                        scroll: 'vertical',
                        styleHtmlContent: true,
                        tpl: 
                        [
                            "<h2>{text}</h2>","{state}" +
                            " <table>" +
                            " <tr>" +
                            " <td> Status: </td>" +
                            " <td> {state} </td>" +
                            " </tr>" +
                            " </table>"
                        ]
                    }//detailCard Panel
                    );
                    detailCard.update(itemData);
                    return detailCard;
                },//getDetailCard
                getItemTextTpl: function() 
                {
                    var tplConstructor = '{text}' +
                    '<tpl if="state === \'running\'">'+
                        '<div class="running">' +
                        ' {[values.state]}' +
                        '</div>' +
                    '</tpl>' +
                    '<tpl if="state === \'stopped\'">'+
                        '<div class="stopped">' +
                        ' {[values.state]}' +
                        '</div>' +
                    '</tpl>';
                    return tplConstructor;
                }//getItemTextTpl
            }
            );//this.productionList
    //////////
    
    
            this.productionList = new Ext.List({
                store: this.productionStore,
                grouped: false,
                emptyText: '<div style="margin:5px;">No notes cached.</div>',
                onItemDisclosure: true,
                itemTpl: '<div class="list-item-title">{text}</div>' +
                                '<div class="list-item-narrative">{info}</div>'
    
    
            });
    
    
    
    
            this.items = [this.productionList]; //works (List)
    //        this.items = [this.productionList2]; //now working (NestedList)
    
    
            MyApp.views.ProductionListView.superclass.initComponent.call(this);
        },//initComponent
    
    
        refreshList: function () {
            this.productionList.refresh();
        }
    });
    I used sencha touch 1.1.1 and 1.1.0 no difference.

    Hope someone can help me?

    I found this nice tutorial on miamicoder.com:
    Source: NotesApp-v1.zip


    Thank you


  2. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    120
    Answers
    11

    Default

    I followed the same tutorial and had the same problem when I started with Sencha Here's a set of tutorials that are absolute brilliantly done

    http://www.sencha.com/learn/intro-to...ist-component/

    This one will show you how to set up the Nested List component with the store and data

    Hope this helps you

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    10

    Default

    Thank you for your reply. I know this tutorial but I want to build an app where the NestedList only is one part of the app which can be selected with a TabPanel.

    In the tutorial there is only one NestedList which I got to work as well but as soon as I try to add a TabPanel or sth. like this the NestedList won't show anymore?

    So I'm looking for a tutorial where the NestedList is combined with other elements e.g. TabPanel?

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    120
    Answers
    11

    Default

    This my friend is your lucky day I did a similar kindda app as my first app. Had the same problems and finally solved them. Here's what you have to do.

    Your Viewport should be :
    Code:
    App.views.Viewport = Ext.extend(Ext.TabPanel, {
          fullscreen : true,
          id : 'ViewPanel',
          initComponent : function(){
                Ext.apply(this, {
                      tabBar: {
                            dock: 'bottom',
                            layout: {pack: 'center'}
                      },
                      items: [
                            {xtype: 'Panel1'},
                            {xtype: 'NestedListView'}
                      ]
                });
                App.views.Viewport.superclass.initComponent.apply(this, arguments);
          }
    });
    Your NestedList :

    Code:
    App.views.NestedListView= Ext.extend(Ext.NestedList, {      
          title: 'My List',
          iconMask: true, 
          ui: 'plain',
          iconCls: 'locate',      
          id: 'listView',
          toolbar:{
                  id: 'listToolbar',
                  items: [ ....... ],
          }
        updateTitleText: true, 
        useTitleAsBackText: true,
        fullscreen: true,
        title : 'My List Works!',
        store: App.list_store,
        displayField: 'text',
    
        getDetailCard: function(item, parent){
                   //assuming you need a detailcard of course
                   ................. 
         }
    });
    Ext.reg('NestedListView', App.views.NestedListView);

    That should work. Lemme know if you have any problems

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    10

    Default

    Hey Sasha

    Thank you for your reply. I still can't get it to work. I get a blank page and a javascript error:
    Code:
    TypeError: 'undefined' is not a function (evaluating 'b.getRootNode()')
    I'd really appreciate if you could provide me with a zip file of your project so I could compare the other files to mine...

    Thank you!

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    120
    Answers
    11

    Default

    Post your code here as it is.... That was just one part of a really huge app of mine. If you try to sit down and understand it you'll probably go nuts

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    120
    Answers
    11

    Default

    Also, if i understand correctly, you're trying to load a list into a panel and that panel into a tabPanel. Don't do that. Load the list as a variable or registered xtype directly into the tabpanel.

  8. #8
    Sencha User
    Join Date
    Oct 2011
    Posts
    10

    Default

    Hey Sasha


    Thank you for your help, here is my code so far:
    index.html:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>MyApp</title>
        <script src="../sencha-touch-1.1.1/sencha-touch.js" type="text/javascript" charset="utf-8"></script>
    
    
        <link rel="stylesheet" href="../sencha-touch-1.1.1/resources/css/sencha-touch.css" type="text/css" media="screen"/>
    
    
        
        <link href="app.css" rel="stylesheet" type="text/css" />    
        <script src="app.js" type="text/javascript"></script> 
        <script src="app/models/ProductionModel.js" type="text/javascript"></script>
        <script src="app/stores/ProductionStore.js" type="text/javascript"></script>
        <script src="app/views/Viewport.js" type="text/javascript"></script>
        <script src="app/views/ProductionNestedListView.js" type="text/javascript"></script>
    
    
        <script src="app/controllers/MyAppController.js" type="text/javascript"></script>
    
    
    </head>
    <body>
    <div id="loading-mask" style="margin:auto;width:200px;padding-top:50px">Loading...</div>
    </body>
    </html>

    controller:
    Code:
    Ext.regController('MyAppController', 
    {
    
    
        'index': function (options) {
    
    
            if (!MyApp.views.viewPort) {
                MyApp.views.viewPort = new MyApp.views.Viewport();
            }
        },
    
    
        'new': function (options) {
            alert('new');
        }
    });
    
    
    MyApp.controllers.MyAppController = Ext.ControllerManager.get('MyAppController');

    Model:
    Code:
    Ext.regModel('ProductionItem', {
        fields: [
            {name: 'text', type: 'string'},
            {name: 'info', type: 'string'},
            {name: 'model', type: 'string'},
            {name: 'items', type: 'auto'},
            {name: 'duration', type: 'auto'},
            {name: 'current_batch', type: 'string'},
            {name: 'state', type: 'string'},
            {name: 'started', type: 'string'},
            {name: 'expected', type: 'string'},
            {name: 'produced', type: 'string'},
            {name: 'removed', type: 'string'},
            {name: 'run_time', type: 'string'},
            {name: 'stop_time', type: 'string'},
            {name: 'fault_time', type: 'string'},
            {name: 'avg_ppm', type: 'string'},
            {name: 'error_counter', type: 'string'},
            {name: 'model', type: 'string'}
        ]
    });
    Store:
    Code:
    Ext.regStore('ProductionStore', {
        model: 'ProductionItem',
        proxy: {
            type: 'ajax',
            url: 'data/mydata.json',
            reader: {
                type: 'tree',
                root: 'items'
            }//reader
        }//proxy
    });
    
    
    MyApp.stores.productionStore = Ext.StoreMgr.get('ProductionStore');

    Viewport:
    Code:
    MyApp.views.Viewport = Ext.extend(Ext.TabPanel, {
          fullscreen : true,
          id : 'ViewPanel',
          initComponent : function(){
                Ext.apply(this, {
                      tabBar: {
                            dock: 'bottom',
                            layout: {pack: 'center'}
                      },
                      items: 
                      [
                        {xtype: 'NestedListView'}
                      ]
                });
                MyApp.views.Viewport.superclass.initComponent.apply(this, arguments);
          }
    });

    NestedListView.js
    Code:
    MyApp.views.NestedListView = Ext.extend(Ext.NestedList, {
        fullscreen: true,
        title: 'Title',
        store: MyApp.stores.productionStore,
        useTitleAsBackText: false,
        id: 'listView',
        toolbar:{
                id: 'listToolbar'
    //            items: [ . ],
          },
        
        getDetailCard: function(item, parent) {
            var itemData = item.attributes.record.data,
            parentData = parent.attributes.record.data,
            detailCard = new Ext.Panel({
                scroll: 'vertical',
                styleHtmlContent: true,
                tpl: ["<h2>{text}</h2>","{state}" +
                " <table>" +
                " <tr>" +
                " <td> Status: </td>" +
                " <td> {state} </td>" +
                
                " </tr>" +
                " </table>"
                ]
            });
            detailCard.update(itemData);
            return detailCard;
        },
        getItemTextTpl: function() {
            var tplConstructor = '{text}' +
                '<tpl if="state === \'running\'">'+
                    '<div class="running">' +
                        ' {[values.state]}' +
                    '</div>' +
                '</tpl>' +
                '<tpl if="state === \'stopped\'">'+
                    '<div class="stopped">' +
                        ' {[values.state]}' +
                    '</div>' +
                '</tpl>';
            return tplConstructor;
        }
    });
    Ext.reg('NestedListView', MyApp.views.NestedListView);

    app.js
    Code:
    var App = new Ext.Application({
        name: 'MyApp',
        useLoadMask: true,
    
    
        launch: function () {
            Ext.dispatch({
                controller: MyApp.controllers.MyAppController,
                action: 'index'
            });
        }
    });

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    120
    Answers
    11

    Default

    Ok a couple of things I noticed right away :

    1. In your nested list you need to specify which of the fields in your model should be displayed. Add in the following :
    Code:
    displayField : 'text'
    2. Just check if its your controller thats giving the error. In the launch function just add one line of code instead of all the stuff thats currently there : ((btw, its this.views.viewport ---> without capital letters, I think it may not work with them ))
    Code:
    this.views.viewport = new this.views.Viewport();
    3. In your index.html file List the views before the viewport. This is incase the viewport goes looking for a xtype that still doesnt exist and therefore loads blank

    If it still doesnt work, open the console in the browser and temme what the error ur getting is

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •