Threaded View

  1. #1
    Sencha User
    Join Date
    Feb 2013
    Location
    Russian federation, Smolensk
    Posts
    38
    Answers
    5
    Vote Rating
    0
    Mike_javaJunior is on a distinguished road

      0  

    Default Answered: ListView Template

    Answered: ListView Template


    and how to configure the template. for example what shall I do to make my page look like buttons and not like lines?
    look:
    Снимок экрана от 2013-02-26 17:42:54.jpg
    when I'd like it to look like:
    Снимок экрана от 2013-02-26 17:43:52.jpg
    here is the code:
    Code:
    public class QueryPanel extends LayoutContainer {
    
    
    
        public QueryPanel(final String customerId, final String login, final String password){
    
    
            setLayout(new FitLayout());
            final ContentPanel gallery = new ContentPanel();
            gallery.setHeading("Reports");
            gallery.setLayout(new FitLayout());
            gallery.setCollapsible(true);
            gallery.setAnimCollapse(false);
            gallery.setFrame(true);
            gallery.setId("images-view");
            gallery.setWidth(535);
    
    
            ListStore<GalleryButtonModel> store = new ListStore<GalleryButtonModel>();
            store.add(new GalleryButtonModel("Copy all messages", "CopyIcon.png", new CopyMsgs(customerId)));
            store.add(new GalleryButtonModel("Spam report", "spam.gif", new SpamReport(customerId, login, password)));
            store.add(new GalleryButtonModel("Top customers report", "topCustomers.gif", new TopCustomersReport(customerId, login, password)));
            store.add(new GalleryButtonModel("Total report", "total-report.gif", new TotalReport(customerId, login, password)));
            store.add(new GalleryButtonModel("Message througput report", "message-troughput.gif", new MessageThroughputReport(customerId, login, password)));
            store.add(new GalleryButtonModel("Delivery time report", "delivery-time.gif", new DeliveryTimeReport(customerId, login, password)));
            store.add(new GalleryButtonModel("Action type report", "report.gif", new ActionTypeReport(customerId, login, password)));
    
    
            ListView<GalleryButtonModel> view = new ListView<GalleryButtonModel>() {
                @Override
                protected GalleryButtonModel prepareData(GalleryButtonModel model) {
                    String s = model.get("name");
                    model.set("shortName", Format.ellipse(s, 15));
                    return model;
                }
    
    
            };
    
    
            view.setId("img-chooser-view");
            view.setTemplate(getTemplate(""));
            view.setStore(store);
            view.setItemSelector("div.thumb-wrap");
            view.getSelectionModel().select(0, false);
            view.getSelectionModel().addListener(Events.SelectionChange,
                    new Listener<SelectionChangedEvent<GalleryButtonModel>>() {
    
    
                        public void handleEvent(SelectionChangedEvent<GalleryButtonModel> be) {
                            be.getSelectedItem().getExample().getButtonModel();
                        }
    
    
                    });
            VBoxLayoutData vFlex = new VBoxLayoutData();
            vFlex.setFlex(1);
            gallery.add(view, new FitData(5,5,5,5));
            add(gallery, vFlex);
       
        }
    
    
            private native String getTemplate(String base)/*-{
                return ['<tpl for=".">',
                    '<div class="thumb-wrap" id="{name}">',
                    '<div class="thumb"><img src="/gxt/images/default/button/{path}" title="{name}"></div>',
                    '<span class="x-editable">{shortName}</span></div>',
                    '</tpl>',
                    '<div class="x-clear"></div>'].join("");
    
    
            }-*/;
    }
    Help please
    Last edited by Mike_javaJunior; 27 Feb 2013 at 6:23 AM. Reason: noone answers

  2. (Question also posted on SO at http://stackoverflow.com/questions/1...rganise-images, so I've copied my answer here for anyone else who sees this thread later and has the same issue)

    Sounds like you are probably talking about this example: http://www.sencha.com/examples-2/#listview

    In the template you are using, you reference the css classes thumb and thumb-wrap. These are not just strings added to the html structure, they have meaning in the CSS on the page. Here are some selected bits according to firebug that apply here:

    Code:
    #images-view .thumb-wrap {
        border: 1px solid white;
        float: left;
        margin: 4px 0 4px 4px;
        padding: 5px;
    }
    
    
    #images-view .thumb {
        background: none repeat scroll 0 0 #DDDDDD;
        padding: 3px;
    }
    These rules describe how to style elements with the thumb and thumb-wrap classes when placed inside a container with the images-view id. You have the id set elsewhere in your code, but if you want to remove that, you may be able to simplify these rules.

    The float:left; style is specifically what is causing them to line up left-to-right, then top-to-bottom. It is up to you of course what other styling you want to use, but if these rules aren't in a CSS file on your page, those elements won't be styled by them.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar