Hybrid 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.

  3. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      1  

    Default


    (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.

  4. #3
    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


    Thank you very much. You helped me a lot. You said to add that to the css, but I didn't manage to do this. I mean, it doesn't work, but I added that I need to the template like:
    Code:
     '<div class="thumb-wrap" id="{name}" style="border: 1px solid white;float: left;margin: 50px 0 4px 150px;padding: 5px;">',
    and have the result. But can you please recommend me a few recources where I can found any information about using css in gwt.

  5. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      1  

    Default


    CSS in GWT starts out as the same as CSS in regular html/js applications - make a css file and reference it with a <link> tag, or just stick the style on the html page somewhere in a <style> tag. In these cases, all of the standard rules about css still apply - nothing special for GWT or GXT, any normal documentation should be helpful to learn css.

    Beyond that, GWT can also optimize your CSS like it does the rest of your code if you use CssResource and ClientBundle. Documentation for these can be found at https://developers.google.com/web-to...le#CssResource - the basic idea is that you keep the CSS in your code, you write a interface that exposes the compiled names of all of the css classes, and you call those methods (i.e. thumbWrap()) instead of referring to the specific string 'thumb-wrap' - this lets the compiler make all of your css names simpler. GXT 3 makes very heavy use of CssResource, though GXT 2 doesn't use it at all to remain compatible with old versions of GWT. But you don't need to use CssResource in order to use CSS in GWT.

Thread Participants: 1