Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 22

Thread: Add jquery selector to component

  1. #11
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    Sounds strange that a handler would add some UI. I don't understand what behavior you're after yet. It looks like you're after masking. If so, just add a positional element with 100% by 100% to the DOM anywhere and style. Use a zindex to position it over the area you want to mask. By the way Component has masking built in, so you could set masking on any container you'd like and you wouldn't have to set up something special. Although that would depend on how you have your setup. Would you like to see how to do a simple mask over the entire window area?

  2. #12
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    Sounds strange that a handler would add some UI.
    I also couldn't believe that, and that's why I tried it a couple of times. As soon as you add the handler to the component, the DOM structure of the text box changes.

    I don't understand what behavior you're after yet.
    That's basically quite easy: It shall be possible to add a picture from the clipboard by pasting it using CTRL+V on the keyboard. HTML 5 could do that, using the clipboard API. Unfortunately up to now only Chrome implements it, and we would need it for IE and Firefox.
    While searching around, I found the plugin paste.js, which is able to handle that (https://github.com/layerssss/paste.js).

    Of course, if you know another / better way of pasting images directly by keyboard, you are highly welcome!

  3. #13
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    I found out why the DOM structure is changed when we add the handler. It's not the handler itself, but the paste.js plugin does it. Have a look at the changed DOM when the handler is added:
    1.jpg

    The marked div is not present if I don't add the handler. Now I had a look at the paste.js file and found this method:
    Code:
    createHiddenEditable=function() {
      return $(document.createElement('div')).attr('contenteditable', true).attr('aria-hidden', true).attr('tabindex', -1).css({
        width: 1,
        height: 1,
        position: 'fixed',
        left: -100,
        overflow: 'hidden'
    });
    };

    Obviously, this div is inserted by the plugin (note the left position with -100), and it breaks our positioning and resizing functionality.
    I will have to check if I can adjust that.

  4. #14
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    The problem is indeed, that when we resize and reposition our components on the mask, we say
    Code:
    component.setPosition(newX, newY);
    component.setHeight(newHeight);
    component.setWidth(newWidth);
    In case that there has been added an additional div to the structure of a textarea, the size of the new div is changed, instead of the size of the text area / text box. When I change the size of the new div to its original values (width 1px, height 1px) and set the correct size to the textarea (using dev mode F12 in IE), everything is fine.

    Can you say if there is a way to influence the setting of the size to the correct component? The following lines represent a text area after having added such a div by the plugin (line 3). Can I adjust the code so that not line 3 is modified, but the textarea itself (line 4)?

    Code:
    1    <div class="position-absolute" id="Customer_TxaCity" style="left: 328px; top: 200px; width: 243px; height: 45px;" __gwtCellBasedWidgetImplDispatchingfocus="true" __gwtCellBasedWidgetImplDispatchingblur="true">
    2        <div class="GLKPPG3CBIC-de-roedl-crm-neutral-gwt-theme-white-client-field-WhiteTextAreaAppearance-WhiteTextAreaStyle-wrap" style="width: 243px;">
    3            <div tabindex="-1" aria-hidden="true" style="left: -100px; width: 241px; height: 43px; overflow: hidden; position: fixed;" contenteditable="true"><br></div>
    4            <textarea tabindex="12" class="GLKPPG3CJHC-de-roedl-crm-neutral-gwt-theme-white-client-field-WhiteTextAreaAppearance-WhiteTextAreaStyle-area GLKPPG3CLHC-de-roedl-crm-neutral-gwt-theme-white-client-field-WhiteTextAreaAppearance-WhiteTextAreaStyle-field pastable" id="Customer_TxaCity-input" style="width: 148px; overflow: auto; padding-top: 3px; background-image: none; background-color: rgb(255, 255, 255); resize: none;" maxlength="144" type="text"></textarea>
    5        </div>
    6    </div>

  5. #15
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    If I could reproduce this behavior I could look at what's going on. Would you be able to provide a test case with all the pieces put together that exhibits the issue? I'm getting squeezed for time as I prep for SenchaCon and GWTCon so I may get delayed in helping as fast as I'd like at the moment.

  6. #16
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    No problem, I will write a sample and send you an email soon.

  7. #17
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    I apologize for delays. I'll be traveling Sunday to Sencha Con then off to GWT Con. I'd love to help you get through the integration challenges. I find it fun to work with thirdparty apis.

  8. #18
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    It seems as if I've found a solution!

    First approach was to resize and reposition the additional div the same way as the textarea. I got that running, but the next effect was that when I called the method "setText" to the component, the text was also added to the additional div instead of the textarea (and therefore not shown any more).

    So it seems as if all actions on the component are done on the first child (which usually is the textarea).
    For that, I changed the paste.js plugin to not insert the div before the textarea, but behind it:

    Code:
    // Changed by Rödl
    // paste = new Paste(createHiddenEditable().insertBefore(textarea), textarea);
    paste = new Paste(createHiddenEditable().insertAfter(textarea), textarea);
    That seems to work pretty fine. Hopefully there are no other side effects.

    Next challenge will be to display the image in a proper way.

  9. #19
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    Bad luck: next issue is that the pasting doesn't work after I have pasted some text before.
    That leads me to the conclusion that handling it this way is no proper solution. Also, I can't see a way to display images within a simple textarea.

    I will now do the following:
    • Write a separate component that consists of different other component.
    • One of these component is a simple label (that is a div in the DOM), that will contain the paste handler.
    • Whan an image is pasted to this label, a further component in the container will be added.
    • This further component will be connected to a new text box, where you can add some comment to the image.

    (It shall behave like in Redmine, if anybody knows that.)

    As my origin question in this thread is answered, I think we can close it by now.
    Thanks for you help so far, Brandon. If you're interested in the final solution, please let me know. I will then share it with you.

  10. #20
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    Sorry for the delay. From what it looks like you may not be operating on the element you want because with the GXT text box has the outer div like you mentioned. So once you get the outer textbox element, you have to select the child input element. Then do your operations on that element. That should work fine then. Did you get it working?

Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. How to find child component of css selector (this.down not working)?
    By patrickkidd in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 18 Feb 2015, 9:48 AM
  2. Component queries with equal sign in selector
    By Roman Tngi in forum Ext: Q&A
    Replies: 5
    Last Post: 25 Feb 2014, 5:21 AM
  3. How to identify a component selector
    By fabiojpoli in forum Ext: Discussion
    Replies: 1
    Last Post: 25 May 2011, 9:37 AM
  4. Ext alternative for jQuery's :input selector?
    By jstockton in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 16 Jul 2008, 9:52 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •