1. #1
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    65
    Vote Rating
    3
    oklymenko is on a distinguished road

      0  

    Question Text label on Sencha Touch Toolbar

    Text label on Sencha Touch Toolbar


    I have experience with ExtJs and now just starting with Sencha Touch. A simple question: how do I add a text label on the toolbar?

    PS. Unless I am doing something wrong, it's just impossible to find anything on the forums. I select the Sencha Touch forum, click Search to open a drop down that has a tiny search field (why is it not just a big field at the top of the page???), enter "text label toolbar" and it gives me 5 pages of matches and none of them are from the Sencha Touch forum. The first match is from ExtJs 1.0.

  2. #2
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    This is a bit late and you've probably figured this out. But I ran across this searching for something else so I fgured I would answer:

    Use the "title" config property. If you need to set it at runtime, use setTitle().

    At least, that's how you set the title. You may have been wanting the same thing I'm looking for now - a label I can drop in at any part of the toolbar which can have controllable styling and not wind up with buttons landing on top of it. In that case, search on.

    As far as the forum search thing, that's a bug and they just recently fixed it.

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    303
    Vote Rating
    3
    steve1964 is on a distinguished road

      0  

    Default


    Hi jep, why not just add an Ext.component as an item of the toolbar and then you have the html property of the component itself to style any text or label..

  4. #4
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    Because by default a component dropped onto a toolbar styles very poorly. It's not a particularly HARD problem to solve, as what I really just need to do is get all the CSS right so it'll look very much like I want to and do things like ellipses when it gets too long, vertical centering, font like the other toolbar elements, etc. Just a little time-consuming.

  5. #5
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    Okay, I eventually got around to it:

    Code:
    Ext.jep.ToolbarText = Ext.extend(Ext.Component, {
      cls:'jep-toolbar-text x-toolbar-title',
      flex:1  
    });
    Ext.reg('jeptoolbartext', Ext.jep.ToolbarText);
    
    var mainPnl =  = new Ext.Panel({
          layout:'fit',
          dockedItems:[
            {xtype:'toolbar', layout:'hbox', dock:'top',
              items:[
                {xtype:'button', ui:'back', text:'Back'},
                {xtype:'jeptoolbartext', html:'Some text here'}
              ]
            }
          ]
      });
    CSS:
    Code:
    .jep-toolbar-text {
      position: static;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 12px;
    }

Similar Threads

  1. FB:Like button on Sencha Touch Toolbar
    By joelphilipgarcia in forum Sencha Touch 1.x: Examples and Showcases
    Replies: 9
    Last Post: 27 Apr 2012, 5:22 PM
  2. Replies: 10
    Last Post: 20 Jan 2012, 10:10 AM
  3. Sencha Touch 1.0.1 toolbar of show
    By helloaccp in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 5 Jan 2011, 6:04 PM
  4. Sencha Touch on iPhone v1 / iPod touch v1 ?
    By palnap in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 28 Oct 2010, 5:30 PM

Thread Participants: 2

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