1. #1
    Sencha User
    Join Date
    Nov 2010
    Location
    San Francisco area
    Posts
    7
    Vote Rating
    0
    uooq is on a distinguished road

      0  

    Default Image buttons in Sencha Touch?

    Image buttons in Sencha Touch?


    I'm brand new to Ext and Sencha Touch, so forgive my n00biness

    I've got an existing html5 app that I'm trying to rewrite using Sencha Touch. My app contains custom buttons that I originally created by styling html anchor tags (i.e. I set the background-image for the <a /> elements) and then handling the click event with jquery event handlers and doing whatever I want with the events.

    I'm trying to figure out what the analogous Sencha Touch recipe for this is... should I use an Ext.Button and set the icon for it? It seems like an icon button is more like a button with an icon inside of it... Should I just type out the old HTML in my index.html and then retrieve that element from the page in the js?

    I'd rather add my buttons to the page programmatically, but I can't quite figure out what Element/Widget to use.

    Thanks in advance for any advice/tips.

  2. #2
    Sencha User wildaker's Avatar
    Join Date
    Sep 2010
    Posts
    30
    Vote Rating
    2
    wildaker is on a distinguished road

      0  

    Default


    There are several approaches that work. However, the cleanest way would probably be to use an Ext.Button, assign a class to it ("cls: 'myBtnClass',", say), and then style it via your app-specific CSS file. The icon: paramater is (as you've worked out) a red herring.

    If your buttons all share certain features it can be helpful to first subclass the native classes (.x-button, .x-button-action and so on, in the various combinations that apply) in your own CSS, and then have simpler classes for each specific button.

    And, of course, you can just modify sencha.css if you prefer, although you'll want to prettify/un-minify it first.

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    45
    Vote Rating
    0
    peterkuli is on a distinguished road

      0  

    Default


    But why is this not working?

    Application JavaScript:
    Code:
    Ext.setup({
        onReady: function() {		
    	var rootPanel = new Ext.Panel({
    		fullscreen: true,					
    		dockedItems:[{					
    			xtype: 'toolbar',
    			dock: 'top',
    			items: [{
    				xtype: 'button',
    				cls: 'btnAction'						
    			}]								
    		}]			
    	});
        }
    });
    CSS:
    Code:
    .btnAction {
    	background: url(../action.png);
    	width: 40px;
    	height: 40px;
    }

  4. #4
    Sencha User wildaker's Avatar
    Join Date
    Sep 2010
    Posts
    30
    Vote Rating
    2
    wildaker is on a distinguished road

      1  

    Default


    The answer can be found by walking the DOM using Web Inspector - your CSS isn't quite where you'd expect (or, arguably, it should) be in the cascade and so is being overridden.

    But, change
    Code:
    .btnAction {...}
    to
    Code:
    .x-button.btnAction.x-button-normal {...}
    and you should be cooking with gas...

    Alternatively - and, perhaps, more elegantly - use the !important declaration to override the override:
    Code:
    .btnAction {
        background: url(../action.png) !important;
        width: 40px;
        height: 40px;
    }
    Safari's (or Chrome's) Web Inspector is utterly essential for debugging - and designing - CSS for Sencha Touch, IME.

    Best,

    Mike

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    45
    Vote Rating
    0
    peterkuli is on a distinguished road

      0  

    Default


    Thanks for your reply!

    A button is placed in the toolbar at the top now...but without the 'good' dimensions, even without the 'width' and 'height' properties.
    Picture

    It seems that the icon itself is bigger than it's 'viewport' and lies 'behind' the outline of the button.

  6. #6
    Sencha User wildaker's Avatar
    Join Date
    Sep 2010
    Posts
    30
    Vote Rating
    2
    wildaker is on a distinguished road

      1  

    Default


    Er... you're using a 60x60 pixel background on a 40x40 pixel button. It will fall off the bottom and sides unless you use size it:
    Code:
    .btnAction {
     background: url(../action.png) !important;
     background-size: 40px 40px;
     width: 40px;
     height: 40px;
    }

    However, you're probably better off using WebKit's CSS3 selectors and doing something like this:
    Code:
    .btnAction 
    {
     padding: 5px !important;
     width: 40px;
     height: 40px;
     -webkit-mask-image: url('../action.png') !important;
     -webkit-mask-size: 30px 30px;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-origin: content;
     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
      from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.9))) !important;
     background-color: #000000 !important;
    }
    which gives you a 30x30 pixel image on a 40x40 pixel button, together with a handsome fading effect (thanks to the use of a -webkit-gradient with alpha transparency as the background-image, masked by the -webkit-mask).

    The CSS3 selectors provide for a lot more flexibility and are well worth learning (and using) in the Sencha Touch context. It pays to be aware that Android's implementation of them is slightly less complete than iOS/Mobile Safari's, however.

  7. #7
    Sencha User
    Join Date
    Oct 2010
    Posts
    45
    Vote Rating
    0
    peterkuli is on a distinguished road

      0  

    Default


    I will look into CSS3 selectors I think...thank you for your reply!

  8. #8
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59
    Vote Rating
    2
    d5chris is on a distinguished road

      0  

    Smile


    I've just been trying to do pretty much the same thing, but with the twist that i needed to programmatically set the image URL because it is to be a DVD cover (so that rules out CSS). Here's how i did it:

    1: In my index.html i included jquery:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

    2: In my JS, i made a button like so:
    { width:235, height:160, xtype: 'button', id:"movie_id_xxx", cls:'myimagebutton', handler: myHandler },
    Then later on, immediately after adding the button to the page, i set the image url like so:
    $('#movie_id_xxx').css('background','url(img/shows/something.jpg)');

    3: In my CSS:
    .myimagebutton {
    border:0;
    border-radius:0;
    -webkit-box-shadow:0 0 10px #000;
    }
    .myimagebutton.x-button-pressed {
    -webkit-box-shadow: 0 0 10px #ff0;
    }

    Works so far, and is pretty simple!

  9. #9
    Sencha User
    Join Date
    Aug 2010
    Location
    https://github.com/RandyMcMillan
    Posts
    27
    Vote Rating
    0
    RandyMcMillan is on a distinguished road

      0  

    Default Use CSS encoding..

    Use CSS encoding..


    For example...

    In a button definition

    Reference the KitchenSink demo for over all usage context.

    cls:'demobtn',

    In CSS...

    .demobtn
    {
    margin: 3% 5%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAUklEQVRIDWNgoDFgBJnPz8d3HkgZ0MIumAX/aWE4yEwmWhkMM3fUAlhI4KRHgwhn0MAkRoMIFhI46dEgwhk0MInRIIKFBE56NIhwBg1MYugHEQCQzwKBoNiZjAAAAABJRU5ErkJggg==);
    }

  10. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    2
    Vote Rating
    0
    Vijaya1 is on a distinguished road

      0  

    Default login page alignment for sencha touch1.1.1 application

    login page alignment for sencha touch1.1.1 application


    Hi All,

    i have created Login page in sencha touch app. For this i have used xtype: "vbox"
    (1)i want the CUID, Pssword be left side and edittext boxes @ right side, and also buttons are in column i want them to be in row.
    (2)i want to reduce the size od edittext box.
    (3)want to remove background box for CUID and Password
    Here is my code.
    Ext.setup({
    onReady: function(){
    new Ext.Panel({
    fullscreen: true,
    items: [{
    xtype: "form",
    layout: "vbox",
    autoscroll: "stretch",
    items: [
    {
    xtype: "toolbar",
    title: "Login",
    cls: "txtlogin"
    },
    {
    xtype: "textfield",
    name: "name",
    label: "CUID",
    cls: "txtField",
    placeholder: "Enter your CUID here"
    },
    {
    xtype: "passwordfield",
    name: "password",
    label: "Password",
    placeholder: "Enter your password"
    },
    {
    xtype: "button",
    cls: "btnLogin",
    ui: "normal",
    text: "Login"
    /*align: "right"*/
    },
    {
    xtype: "button",
    cls: "btnReset",
    ui: "normal",
    text: "Reset"
    }
    ]
    }]
    });
    }
    });
    Any suggestions, advise would be appreciable
    please help me...

Similar Threads

  1. Replies: 10
    Last Post: 20 Jan 2012, 10:10 AM
  2. 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
  3. Replies: 2
    Last Post: 9 Sep 2010, 10:24 AM

Thread Participants: 5