1. #1
    Ext User
    Join Date
    Nov 2010
    Location
    Turkey
    Posts
    72
    Vote Rating
    0
    slckysr is on a distinguished road

      0  

    Question Different color for each window

    Different color for each window


    hi guys,

    i would ask before brake all my code together instead of making the style better :P

    so i have a hierarchy of windows like this:



    stores -> malls, shops, ...

    workers -> inbound, outbound, ...

    clients -> free, ....

    categories -> sport, furniture, high-tech, ....


    ok now i want to give every main window a main color and different tones of the main window color for each of his subwindows. how can i do this. which tag must i use for this.


    i hope i could described my problem, my english is not so well.

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I recommend giving each of these windows a different 'cls' config option and write css rules based on the assigned class to change the used colors and background-images.

    Another option would be using 'baseCls' instead of 'cls', but in that case the css rules need to style everything for the window, because there would be no default.

  3. #3
    Ext User
    Join Date
    Nov 2010
    Location
    Turkey
    Posts
    72
    Vote Rating
    0
    slckysr is on a distinguished road

      0  

    Default


    i tought there were be a solution like the style tag

    PHP Code:
    new Ext.Window({
            
    titlewindowtitle,        
            
    layout'fit',
            
    widthwidth,
            
    heightheight,
            
    closeAction'destroy',
            
    renderTo:'windowpane',
            
    plaintrue,
            
    modaltrue,
            
    borderfalse,
            
    itemsobjs,
            
    resizablefalse,
            
    shimfalse,
            
    animCollapsefalse,
            
    constrainHeadertrue,
            
    closablefalse,
            
            
    style: {
                
    background: (obj==bannerform?'#3D5266':'#99CCFF')
            }, 
    is that a bad solution if it's a solution, it doesnt work for now im trying on it

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No, a window is made up of several elements. Specifying a 'style' will only affect the outer most element, but you also need to change the header and the frame (and possibly the toolbars).

  5. #5
    Ext User
    Join Date
    Nov 2010
    Location
    Turkey
    Posts
    72
    Vote Rating
    0
    slckysr is on a distinguished road

      0  

    Default


    so i have to use the 'cls' tag

    ok thank you very much i will search for it

  6. #6
    Ext User
    Join Date
    Nov 2010
    Location
    Turkey
    Posts
    72
    Vote Rating
    0
    slckysr is on a distinguished road

      0  

    Default


    ok i tried soe stuff but nothing goes like i would

    heres my extjs code

    PHP Code:
    openedforms[opened] = new Ext.Window({
                
    titlewindowtitle,
                
    layout'fit',
                
    widthwidth,
                
    heightheight,
                
    closeAction'hide',
                
    plaintrue,
                
    borderfalse,
                
    renderTo:'windowpane',
                
    itemsobj,
                
    shimfalse,
                
    minWidthminWidth,
                
    minHeightminHeight,
                
    animCollapsetrue,
                
    constrainHeadertrue,
                
    collapsibletrue,
                
    maximizabletrue,
                
    openedopened,
                
    iconClsopened 'window',
            });
            
    openedforms[opened].addClass('win_campaigns');
            
            
    openedforms[opened].show();
            
    windows.register(openedforms[opened]);
            
    windows.bringToFront(openedforms[opened]); 
    and my css

    PHP Code:
    .win_campaigns {
        
    background-color#3D5266;

    instead of opened in openedforms[] comes the panel name of the window which will be opened.

    the window is opened but the color isnt change. what do i wrong ?

    editpost: i saw that maybe the class path is not seen how do i configure it the path is

    resources/css/modifytheme.css and win_campaigns is the class in it
    Last edited by slckysr; 7 Jan 2011 at 3:40 AM. Reason: forgot some stuff

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    1. Ext.Window doesn't have an 'addClass' method. However, the element returned by win.getEl() does.

    2. A window consists of a lot more elements. You need a several css rules (one for each element) to modify backgrounds and borders.

  8. #8
    Ext User
    Join Date
    Nov 2010
    Location
    Turkey
    Posts
    72
    Vote Rating
    0
    slckysr is on a distinguished road

      0  

    Default


    thnx Condor but i really dont understand how i do it, i just want to change the color of the panel. every other settings from the gray theme should be keep like its originally setting. only the background color have to be changed

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    So you want:
    Code:
    .win_campaigns .x-window-body {
        background-color: #3D5266;
    }

  10. #10
    Ext User
    Join Date
    Nov 2010
    Location
    Turkey
    Posts
    72
    Vote Rating
    0
    slckysr is on a distinguished road

      0  

    Default


    that doesnt functionate too nothing happens i pasted
    .win_campaigns .x-window-body {
    background-color: #3D5266;
    }

    the code into ext-all.css

    and tried

    cls: 'win_campaigns' or addClass('win_campaigns') nothing helps whats wrong with that ?

Similar Threads

  1. Change inactive window title color
    By globulinemin in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 7 Jan 2011, 4:13 AM
  2. Window color
    By juliano in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 4 May 2010, 5:10 PM
  3. Window border color
    By iaio81 in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 13 Nov 2009, 7:05 AM
  4. How to display window with color specified.
    By rahulmca1@gmail.com in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 28 Jan 2009, 1:21 AM
  5. Please HELP: Problem with window background color
    By vizcano in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 20 May 2008, 10:24 PM

Thread Participants: 1

Tags for this Thread