1. #1
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316
    Vote Rating
    1
    blessan is on a distinguished road

      0  

    Default How to add class in Kitchen Sink 0.94?

    How to add class in Kitchen Sink 0.94?


    I was working on a app. I follow the kitchen sink as a code structure.
    I have a problem. In the structure.js where the items are listed, I wanted to add a class to each item. I use this to add an icon.

    It was working in 0.93. This was my structure

    sink.Structure = [{
    text: 'Appointments',
    cls: 'appointmentsIcon',
    card: modules.Appointments
    },{
    text: 'Checkout',
    card: modules.Checkout,
    cls: 'appointmentsIcon checkoutIcon'
    },{
    text: 'Customer',
    cls: 'appointmentsIcon customerIcon'
    },{
    text: 'Management',
    card: modules.Management,
    cls: 'appointmentsIcon managementIcon'
    },{
    text: 'Administration',
    card: modules.Administration,
    cls: 'appointmentsIcon administrationIcon'
    },{
    text: 'Community',
    cls: 'appointmentsIcon communityIcon'
    }];

    The above structure worked in 0.93.

    So I reworked on it a bit to work in 0.94

    sink.Structure = [
    {
    text: 'BOOK',
    cls: 'bookIcon',
    //card: modules.Book,
    leaf: true
    },
    {
    text: 'SELL',
    card: demos.Buttons,
    cls: 'bookIcon sellIcon',
    leaf: true
    },
    {
    text: 'CLIENT',
    //card: demos.Touch,
    cls: 'bookIcon clientIcon',
    leaf: true
    },
    {
    text: 'COACH',
    //card: demos.Touch,
    cls: 'bookIcon coachIcon',
    leaf: true
    },
    {
    text: 'ADMIN',
    //card: demos.Touch,
    cls: 'bookIcon adminIcon',
    leaf: true
    },
    {
    text: 'COMMUNITY',
    //card: demos.Touch,
    cls: 'bookIcon communityIcon',
    leaf: true
    }];

    But the class are not getting added to the items. How can this be done?

  2. #2
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316
    Vote Rating
    1
    blessan is on a distinguished road

      0  

    Default


    There has to be a way to add a class to items. Its needed for styling.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,987
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Look at how it's defined. The card definition is in another file.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316
    Vote Rating
    1
    blessan is on a distinguished road

      0  

    Default


    I not trying to get a class in the card. But in the navigation panel. The first list the shows. I tried giving class in the card and it adds a class to the card when it shows but not to the item in the navigation list.

  5. #5
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,352
    Vote Rating
    127
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Take a look at the new NestedList. You will probably want to add a div wrap with an additional css class via the getItemTextTpl configuration.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  6. #6
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316
    Vote Rating
    1
    blessan is on a distinguished road

      0  

    Default


    thanks that. Worked. But a cls config would be great. As we still cant put a class in the outer div of the item. The tpl we make goes inside the div. Ao I added a cls to the nested list. And then accesses the outer div.

Similar Threads

  1. add new panel in kitchen sink demo
    By gimox in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 6 Sep 2010, 5:30 AM
  2. Ajax Data Kitchen Sink demo Broken?
    By RobertG in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 5 Sep 2010, 10:36 PM
  3. Question to Cards of Kitchen Sink/ Events Example
    By msinn in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 30 Jul 2010, 12:53 PM
  4. [.8 -- iPhone] Kitchen Sink example - All ssyptes of layout issues
    By jay@moduscreate.com in forum Sencha Touch 1.x: Bugs
    Replies: 1
    Last Post: 19 May 2010, 9:58 AM
  5. Replies: 2
    Last Post: 28 May 2009, 1:14 PM

Thread Participants: 2