Results 1 to 5 of 5

Thread: Style detailCard

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    6
    Vote Rating
    1
      0  

    Default 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
      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
    454
    Answers
    19
    Vote Rating
    22
      0  

    Default 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
      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
    454
    Answers
    19
    Vote Rating
    22
      0  

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •