1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    70
    Vote Rating
    0
    mukeshgla is on a distinguished road

      0  

    Default Unanswered: Theme and lay-outing using css in sencha

    Unanswered: Theme and lay-outing using css in sencha


    Hi I want to know which file( CSS and which specific tag) and where do I need to change for layout and themes ? I have attached two images in Image one I have a data grid I want to shift this grid in middle shown by arrows and its columns background should be white so i want to changes it's look so where do I need to change.

    In second page I have used a tab panel but I don't want this blue background ( behind Response and comparison title shown in red circle) I want it to transparent so for this where do I need to change ? I want my custom look in every component so where should i refer ?
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    To get the grid in the middle, you need to have the chart and the grid in a hbox layout with align : 'middle'. Simple example:

    Code:
    new Ext.Container({
        fullscreen : true,
        layout     : {
            type  : 'hbox',
            align : 'middle'
        },
        items      : [
            {
                html : 'left',
                flex : 1
            },
            {
                html : 'right',
                flex : 1
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    70
    Vote Rating
    0
    mukeshgla is on a distinguished road

      0  

    Default It did not work

    It did not work


    Hi I tried align :'middle' but it did not work, again the same issue the columns row shifted to middle but rest of the row data did not rendered and chart disappeared. I have attached the image. Though in image align: 'center' is mentioned but I tried with align :'middle' the result was same.
    Attached Images
    Last edited by mukeshgla; 20 May 2012 at 9:20 PM. Reason: addition info

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You need to give the grid a height. I gave you a simple example and it works correct?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    70
    Vote Rating
    0
    mukeshgla is on a distinguished road

      0  

    Default its not working

    its not working


    Hi Mitchell,

    I tried all the things you said but the result is same. it display only header of the Grid and I cant see the grids. I have attached my code, when you will run it you can see that the rows wont be rendered.

    When you will remove height=' 500' from config of DecompositionGrid.js file it will run properly but the Grid won't come in middle.


    Thanks & Regards
    Mukesh Pandey
    Attached Files

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Why did you change the class name of Ext.ux.touch.grid.View?!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    70
    Vote Rating
    0
    mukeshgla is on a distinguished road

      0  

    Default


    I wanted to name it as per my project folder structure that's why I changed it, Anyway please let me know if there is any issues regarding Licence of your grid. I mean can I use your grid by changing its name ?

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by mukeshgla View Post
    I wanted to name it as per my project folder structure that's why I changed it, Anyway please let me know if there is any issues regarding Licence of your grid. I mean can I use your grid by changing its name ?
    You are taking my intellectual property and using it as your own. You should have a ux directory and have any ux's in there.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    70
    Vote Rating
    0
    mukeshgla is on a distinguished road

      0  

    Default


    ok I am really sorry for this, I was not aware with these terms anyway I ll use Grid as per your folder structure, did you check with the code which I posted here. in this code I am not able to move Grid in middle.

Thread Participants: 1

Tags for this Thread