Threaded View

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default Div with title in sidebar showing up more than once, showing above each item

    Div with title in sidebar showing up more than once, showing above each item


    Hello,

    Please pardon my ignorance if this is a stupid question. Also, please forgive me if I am not describing the details enough or if I am describing in too much detail.

    I have a Sencha project. At this time, I am not using it within a web app, within any MVC app.

    Basically, I want in the Sidebar that will run down the left side of the browser the following:

    PC6000 (a title, just a title describing the items below it … a user clicking it does nothing)
    Oven Report (slightly indented and can be clicked by user)
    Product Report (slightly indented and can be clicked by user)

    My problem is that currently I have the following in the browser:

    PC6000
    Oven Report
    PC6000
    Product Report

    There is the Ext.container.Viewport named Main in Project Inspector under Views. It has underneath it, at the same level, the Ext.panel.Panel named MyPanel and the Ext.Component named Header. Within the MyPanel, there is both the header top and sidebar left.

    In the Project Inspector, at the same level of the Main view, there is PC6000.SideBar (Ext.view.View) and under it there is itemTpl. Also in Project Inspector, at the same level of the Main view, there is the Ext.Component named Header.

    The code for the PC6000.SideBar in Sencha is as follows:
    Code:
    Ext.define('MyApp.view.PC6000.SideBar', {
        extend: 'Ext.view.View',
        alias: 'widget.PC6000sidebar',
     
        border: false,
        cls: 'sidebar-list',
        stateful: true,
        itemSelector: '.product',
        store: 'PC6000s',
     
        initComponent: function() {
            var me = this;
     
            Ext.applyIf(me, {
                itemTpl: [
                    '<div class="sidebar-title">PC6000</div>',
                    '<tpl for=".">',
                    '    <div class="product">{name}</div>',
                    '</tpl>',
                    ''
                ]
            });
     
            me.callParent(arguments);
        }
     
    });
    The code for the itemTpl in Sencha that is under the PC6000.SideBar is as follows:

    Code:
    <div class="sidebar-title">PC6000</div>
    <tpl for=".">
        <div class="product">{name}</div>
    </tpl>
    In Sencha, there is under Models in Project Inspector the Ext.data.Model named PC6000 with the two fields named id and name. The code for the PC6000 Model is as follows:

    Code:
    Ext.define('MyApp.model.PC6000', {
        extend: 'Ext.data.Model',
     
        fields: [
            {
                name: 'id'
            },
            {
                name: 'name'
            }
        ]
    });
    There is a json file named products.json and its code is as follows:

    Code:
    [
         {
               id: 1,
               name: "Oven Report"
          },
          {
               id: 2,
               name: "Product Report"
         }
    ]

    In case it is helpful and relevant, there is a SidebarCSS.css file with the following code:

    Code:
    .product
    {
                    border-width:1px 0;
                    border-style:solid;
                    border-color:#eaeaea;
                    padding:3px 10px;
                    font-size:12px
    }
    .sidebar-list
    {
                    background:#F8F8F8
                   
    }
    .sidebar-list .x-item-selected
    {
                    color:#fff;
                    font-weight:bold;
                    text-shadow:0 1px 0 #4c5866;
                    border-color:#7b8b9d;
                    background-image:none;
                    background-color:#7b8b9d;
                    background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8493a4), color-stop(100%, #6f8194));
                    background-image:-moz-linear-gradient(top, #8493a4,#6f8194);
                    background-image:-o-linear-gradient(top, #8493a4,#6f8194);background-image:linear-gradient(top, #8493a4,#6f8194)
    }
    .x-nlg .sidebar-list .x-item-selected
    {
                    background:url(../images/legacy/sidebar-selected-bg.png) repeat-x
     
    }
    .sidebar-title
    {
                    color:#666;
                    font-size:11px;
                    font-weight:bold;
                    text-transform:uppercase;
                    text-shadow:0 1px 0 white;
                    padding:5px
    }

    In Project Inspector, there is under Stores the Ext.data.JsonStore named PC6000s and it has the following code:

    Code:
    Ext.define('MyApp.store.PC6000s', {
        extend: 'Ext.data.Store',
     
        requires: [
            'MyApp.model.PC6000'
        ],
     
        constructor: function(cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.apply({
                autoLoad: true,
                storeId: 'PC6000s',
                model: 'MyApp.model.PC6000',
                sortOnFilter: false,
                proxy: {
                    type: 'ajax',
                    url: 'resources/json/products.json',
                    reader: {
                        type: 'json'
                    }
                }
            }, cfg)]);
        }
    });
    So I was thinking that the following code in itemTpl that is under PC6000.SideBar (the sidebar that is not within the Main view but that is linked to the Main view) will have the “PC6000” title only ONCE in the sidebar and then underneath there would be the slightly indented choices Oven Report and Product Report but instead the title “PC6000” shows up above both Oven Report AND Product Report:

    Code:
    <div class="sidebar-title">PC6000</div>
    <tpl for=".">
        <div class="product">{name}</div>
    </tpl>
    I thought that this code immediately above would show the div with title PC6000 one time and then underneath there would be the two choices Oven Repor t and Product Report, but I am getting the following in the browser instead:

    PC6000
    Oven Report
    PC6000
    Product Report


    So I have two questions:

    #1 - How can I get the sidebar to show like the following:

    PC6000
    Oven Report
    Product Report


    #2 – Do I need a second itemTPL under PC6000.SideBar that has some decimal value?

    I have noticed in some examples that I found on the Internet that there is a second itemTpl (or tpl) that has a decimal value (like 0.08316014846786857 for example). In an example Sencha project, I noticed that every tpl or itemTpl has a second tpl or itemTpl that has some unique decimal value. What is that second tpl that has some decimal value for each tpl that has some code for Divs?



    I thank you in advance for consideration of my two questions. Please let me know of course if I can provide further information.

    Hviezdoslav
    29-NOV-2012
    Last edited by aconran; 29 Nov 2012 at 9:47 AM. Reason: add code tags