Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    8
    Vote Rating
    0
    terrestris is on a distinguished road

      0  

    Question Answered: textfield displacement after focus / keyboard shown (vbox layout + scrolled list)

    Answered: textfield displacement after focus / keyboard shown (vbox layout + scrolled list)


    Hi forum,

    I have a strange but reproducible behavior with my Sencha Touch 1.1.0-code which I cannot fix myself.

    I have a simple panel in fullscreen mode which contains a toolbar as dockedItem, a textfield and a list. When I scroll the list on my Google Nexus S (Android 2.3.4) and then focus the textfield, the textfield (partwise) disappears from the screen. When one then starts entering some characters into the field, the view "ditches" up and down.

    I can reproduce this behaviour on the Nexus everytime, but fail to reproduce this on my Samsung Galaxy S (GT-I9000) and on iPad 2 and iPhone 4 (everything is working like a charm there).

    Here is a minimal online example of the described behaviour:
    http://www.webmapcenter.de/textfield-focus-scroll-bug/example.html

    If you load this example on the nexus and follow these steps, you should be able to reproduce the error:
    1. Scroll the list of names in any vertical direction
    2. Focus the textfield by tapping into the field
    3. (the keyboard pops up)
    4. The layout is distorted, the textfield isn't fully visible
    5. When you now start to sth. in the field the ditching occurs and the situation is worse
    This is the full code:

    example.html
    HTML Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Example</title>
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <link rel="stylesheet" href="./sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">       
            <script type="text/javascript" src="./sencha-touch-1.1.0/sencha-touch.js"></script>
            <script type="text/javascript" src="example.js"></script>
        </head>
        <body>
        </body>
    </html>
    example.js (http://www.webmapcenter.de/textfield...bug/example.js)
    PHP Code:
    // bogus datawindow.mockupData = [
        
    {firstName'Ed 1'},  {firstName'Tommy 1'},  {firstName'Aaron 1'},
        {
    firstName'Ed 2'},  {firstName'Tommy 2'},  {firstName'Aaron 2'},
        {
    firstName'Ed 3'},  {firstName'Tommy 3'},  {firstName'Aaron 3'},
        {
    firstName'Ed 4'},  {firstName'Tommy 4'},  {firstName'Aaron 4'},
        {
    firstName'Ed 5'},  {firstName'Tommy 5'},  {firstName'Aaron 5'},
        {
    firstName'Ed 6'},  {firstName'Tommy 6'},  {firstName'Aaron 6'},
        {
    firstName'Ed 7'},  {firstName'Tommy 7'},  {firstName'Aaron 7'},
        {
    firstName'Ed 8'},  {firstName'Tommy 8'},  {firstName'Aaron 8'},
        {
    firstName'Ed 9'},  {firstName'Tommy 9'},  {firstName'Aaron 9'},
        {
    firstName'Ed 10'}, {firstName'Tommy 10'}, {firstName'Aaron 10'
    }];
    // simple model
    Ext.regModel(
        
    'User', {
        
    fields: [
            
    'firstName'
        
    ]}
    );

    Ext.setup({
        
    onReady: function(){
            var 
    btn = new Ext.Button({
                
    text'btn'
            
    });
           var 
    toolbar = new Ext.Toolbar({
                
    items: [
                    
    btn
                
    ]
            });
           var 
    textfield = new Ext.form.Text({
                
    flex1,
                
    name'my-textfield',
                
    placeHolder'scroll list, then focus me'
            
    });
           var list = new 
    Ext.List({
                
    flex12,
                
    itemTpl: new Ext.XTemplate('{firstName}'),
                
    store: new Ext.data.Store({
                    
    model'User',
                    
    datawindow.mockupData
                
    })
            });
           var 
    innerPanel = new Ext.Panel({
                
    layout: {
                    
    type'vbox',
                    
    align'stretch'
                
    },
                
    items: [
                    
    textfield,
                    list
                ]
            });
           var 
    outerPanel = new Ext.Panel({
                
    fullscreentrue,
                
    layout'fit',
                
    // This is the offending configuration. Some notes:
                //   1) if I don't include dockedItems, the bug is gone
                //   2) if the dockedItems belong to the innerPanel
                //      the bug is there as well
                
    dockedItems: [toolbar],
                
    items: [innerPanel]
            });
            
    // for easier access to the created elements
            
    window.debug = {
                
    btnbtn,
                
    toolbartoolbar,
                
    textfieldtextfield,
                list: list,
                
    innerPanelinnerPanel,
                
    outerPanelouterPanel
            
    };
        }
    }); 
    If I leave out the dockedItems, the error is gone. If I move the dockedItems from the outer to the inner panel, the bug still occurs.

    It does not matter whether I instanciate the toolbar or use the xtype only.

    I am out of guesses and gratefull for every hint / insight you can share.

    Maybe I am missing something fundamentally or create the desired layout in too complicated way. Please tell me if this can be simplified.

    Some images of the problem in the Nexus in case you do not own that particular device (sorry for the poor quality):

    Initial layout, everything is ok:
    initial-load.jpg

    After the list was scrolled and the field got focus:
    after-textfield-focus.jpg

    After one typed somthing in the field:
    after-typing-in-textfield.jpg

    Thanks in advance and best regards,
    Marc

  2. try adding a 'fit layout to the innerPanel too. I didn't realize that didn't have a layout.

    Why do you use an inner AND outer panel?
    I understand the inner is the wrapper panel for the list, but why use an outer one?
    Couldn't you just dock the toolbar in the innerPanel?

  3. #2
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    New Jersey, USA
    Posts
    130
    Answers
    4
    Vote Rating
    0
    jjerome is on a distinguished road

      0  

    Default


    Could it be the flexes you set to the toolbar and list? Maybe when the keyboard comes up the window resizes and the flex properties will cause the components to resize dramatically. You shouldn't need those anyway. The 'fit' layout should take care of it for you (I believe it would look the same).

    I've noticed this problem happen to me quite often..

  4. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    8
    Vote Rating
    0
    terrestris is on a distinguished road

      0  

    Default


    Quote Originally Posted by jjerome View Post
    Could it be the flexes you set to the toolbar and list? Maybe when the keyboard comes up the window resizes and the flex properties will cause the components to resize dramatically. You shouldn't need those anyway. The 'fit' layout should take care of it for you (I believe it would look the same).
    Hi jjerome,
    thanks for the feedback.

    Yes, if I remove both

    PHP Code:
    layout: {
        
    type'vbox',
        
    align'stretch'

    and the flex-configurations, the displacement isn't happening and everything look neat at first sight, BUT the list of names isn't scrollable in a reasonable way: see http://www.webmapcenter.de/textfield-focus-scroll-bug/example2.html

    So sadly this doesn't seem to be an option for me. Or can I make the bottom list scrollable by a certain configuration?

    Thanks in any case,
    Marc

  5. #4
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    New Jersey, USA
    Posts
    130
    Answers
    4
    Vote Rating
    0
    jjerome is on a distinguished road

      0  

    Default


    add a 'fit' layout to the list. that should fix it

  6. #5
    Sencha User
    Join Date
    Dec 2010
    Posts
    8
    Vote Rating
    0
    terrestris is on a distinguished road

      0  

    Default


    Sorry, that didn't work, I updated the http://www.webmapcenter.de/textfield.../example2.html example with layout: 'fit' but still the scrolling in the list is somewhat broken. More ideas of how to get back the original scrolling behaviour?

  7. #6
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    New Jersey, USA
    Posts
    130
    Answers
    4
    Vote Rating
    0
    jjerome is on a distinguished road

      0  

    Default


    try adding a 'fit layout to the innerPanel too. I didn't realize that didn't have a layout.

    Why do you use an inner AND outer panel?
    I understand the inner is the wrapper panel for the list, but why use an outer one?
    Couldn't you just dock the toolbar in the innerPanel?

  8. #7
    Sencha User
    Join Date
    Dec 2010
    Posts
    8
    Vote Rating
    0
    terrestris is on a distinguished road

      0  

    Default


    Hi jjerome,

    Thanks a lot. That was indeed the missing piece.

    One oddity though: only adding layout: 'fit' did not do the trick I also had to swap the position of the textfield and the list in the innerPanel. The relevant code now reads:

    PHP Code:
    var innerPanel = new Ext.Panel({
        
    layout'fit',
        
    items: [
            list,
            
    textfield
        
    ]
    }); 
    Visually they appear with the textfield above the list in the Nexus, iPad 2 and iPhone 3GS though.

    As far as I can tell you solved this issue, so thanks a lot!