Image after List like left menu at kitchensink?!

[Carsten S.]

Hello folks,
im new at sencha and .js...

i try to learn with the kitchensink. in the left card of the dem you see the little Kitchensink logo. how can i place a logo after a list? i try me out with the mondrian toutorial, this is my list code:

 var menuList = viewport.menuList = new Ext.List({
            store: this.stores.pages,
            itemTpl: '{title}',
            allowDeselect: false,
            singleSelect: true,
                plugins: [{
                        ptype: 'pullrefresh',
                        autoPaging: true,
                }]
});

This is the viewport

var menu = viewport.menu = new Ext.Panel({
            items: [menuList],
            layout: 'fit',
            width: 250,
            dock: 'left',
            border: true,
        });

what must i write in the css to create a image AFTER the list?

I Hope you understand my question

[mitchellsimoens]

This is the CSS that adds it:

.x-tablet .x-fullscreen > .x-nested-list .x-list-item:last-child:after, .x-desktop .x-fullscreen > .x-nested-list .x-list-item:last-child:after {
  content: "\00a0";
  position: absolute;
  bottom: -80px;
  margin-bottom: 20px;
  left: 110px;
  width: 30px;
  height: 43px;
  background-image: url(../img/sencha_small.png);
}

[Carsten S.]

Hey Mitchell,

i have allready try this. I have add this in my custom.css, but it issnt showing up in my list...
do you need more sourcecode?

thank you for your help!

[mitchellsimoens]

Are you using it in a nested list not just a regular list? Is the CSS classes selecting the right element?

[Carsten S.]

is use a normal list.


how can i see if i select the right css element?

Sorry i'm new at css and .js

where can i see which element uses with css class?

[mitchellsimoens]

Use Chrome dev tools or Safari web inspector. There is an Element tab that you can see the DOM.

The issue is the CSS selector is only being used on the nested list:

.x-tablet .x-fullscreen > .x-nested-list .x-list-item:last-child:after, .x-desktop .x-fullscreen > .x-nested-list .x-list-item:last-child:after

the .x-nested-list is controlling this... try to change it to x-list for both x-nested-list instances there.

[Carsten S.]

ok, its WORK! Thank you, this was the right question.

i have found the class with the safari developer mode.

For other User, this add a Image under your List:

.x-list .x-list-item:last-child:after, .x-desktop .x-fullscreen > .x-list .x-list-item:last-child:after {
  content: "\00a0";
position: absolute;
  bottom: -80px;
  margin-bottom: 20px;
  left: 110px;
  width: 30px;
  height: 43px;
  background-image: url(./button.png);
}

@Mittchel, a question at the site: I Have a Card Layout, in the left frame i have the list, if i touch a link in this list, the content change on the right side.
how can i animate this? i have try all, but its only slide or flip on the iphone if the menu is disapear... on the ipad where the menu and the car on one scree, i cant animate it. (i hope you understand my English )

[mitchellsimoens]

If you have two items in a card layout, you can use the cardSwitchAnimation config on the container that has the card layout. Or if you use setActiveItem the 2nd argument you can pass in would be an anim config.

[Carsten S.]

i have try the following, it wont work :/

var page = viewport.page = new Ext.Panel({
            cls: 'page',
            layout: 'card',
            cardSwitchAnimation: 'slide',
            cover: true,
            styleHtmlContent: true,
            tpl: '<h2>{title}</h2>{content}',
            scroll: 'vertical',
        });

[mitchellsimoens]

Try adding the fullscreen config to true. Once that component is created, fullscreen will make it appear with 100% height and width.