Hybrid View

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    6
    Vote Rating
    1
    Tubia87 is on a distinguished road

      0  

    Default Unanswered: Style detailCard

    Unanswered: Style detailCard


    Hi all,
    this is a very newbie question but I read the docs and was unable to solve it.
    So, I'm referring to the example app (I'm studying it in depth in order to understand some concepts), in particular to the rss feed reader part.
    Everything works but I have a question.
    How can I style the content displayed by detailCard?
    In the example, the detailCard display the field 'content' from the store as html, but how to intervene in the outputted Html? I think I could put a Cls in detailCard but how if I have different elements in my 'content'?
    For example, my content has <img>, <h2>, <h3> and so on. Can I style them? for example, floating images to the right, reduce h2 and h3 fonts and so on...

    Thank you in advance for your help

  2. #2
    Sencha User
    Join Date
    Aug 2012
    Posts
    6
    Vote Rating
    1
    Tubia87 is on a distinguished road

      0  

    Default


    I'm still stuck here, anyone who knows how to solve this? Or a possible solution, also a hint

    Thank you in advance!

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    17
    digeridoopoo will become famous soon enough

      0  

    Default Normal HTML tags

    Normal HTML tags


    Is the detail card displayed as an itemTpl? What I do is create a normal css class which I insert in my index html with:

    Code:
    <link rel="stylesheet" type="text/css" href="mystyle.css" />

    For example, I create a css file with something like this:

    Code:
    .headertext {
            font-family: "Arial Black", Gadget, sans-serif;
        font-size: 18px;
        font-weight: bold;
    }
    Then in the item tpl you can do something like
    Code:
    <div class="header text">{title}</div>
    For more complex ones or if my brain is fried I do a mockup in Dreamwevar or similar web editor then I can apply the CSS easily.

    :-)

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    6
    Vote Rating
    1
    Tubia87 is on a distinguished road

      0  

    Default


    It's better that I report my entire app, that is here, you can also run it:
    http://www.senchafiddle.com/#sjxGD
    So, my problem actually is that I want render the img from the feed styling them (for example, make them float:right). Actually, if you see the code, I've added in "detailCard", "style" with text-align:right, for testing. The result is that each entry has the text aligned right. The question is how to render each element of the entry singularly: the <h2> in a way, the <h3> in another way, the <img> in another way and so on. Maybe I could add a class to the detailCard with 'cls'.
    digeridoopoo, your approach seems interesting but I didn't understand it well.
    Let me know if, with this info provided above, the problem is clearer.

    Thank you for your attention!

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    17
    digeridoopoo will become famous soon enough

      0  

    Default Models...

    Models...


    I took a look at your code, it looks like you have these fields on your store:

    'title', 'link', 'author', 'contentSnippet', 'content',

    It looks like in your JSON response there is only one item for content, containing the whole post. Is there another way you can grab the data? What I have done in the past, for example grabbing data from facebook is I have a model for each item in my post, e.g. Title, Image, Bodytext etc. Then in my itemtpl template I have these as separate items {title} {image} {bodytext} and I can apply normal css to them.

    See if you can get the response in another way. If there is no way to get the separate items you might have to look at other ways you can split up the data.

Thread Participants: 1

Tags for this Thread