Results 1 to 9 of 9

Thread: Editable header of tabPanel

  1. #1
    Ext User
    Join Date
    Apr 2010
    Posts
    11
    Vote Rating
    0
      0  

    Default Editable header of tabPanel

    Hi, I am wondering if there is a way to make a tabPanel header/footer editable.

    I imagine it would be something like setting the contentEditable property of the header by a custom css, but I seem to be stuck. Any pointers?

    Code:
                    xtype:'tabpanel',
                    id:'tabPanel,
                    items:
                    [
                        {
                           id:'PanelWithCustomHeader',
                           //here be code that makes the custom header, something like headerCfg: ....
                        },
                           //etc....
                    ]

  2. #2
    Ext User
    Join Date
    Jun 2010
    Posts
    40
    Vote Rating
    0
      0  

    Default

    Do you want to actually be able to type into the header or click and use a form?
    The golden rules of programming
    1. If it ain't broke, don't fix it
    2. Simple is good
    3. Just because you can doesn't mean you should.

    The Rule of 5: If your software has 5 bugs or more, it isn't fit for release
    The Rule of Trust: Never trust a software developer whose job title is not software developer/engineer.

  3. #3
    Ext User
    Join Date
    Apr 2010
    Posts
    11
    Vote Rating
    0
      0  

    Default

    I wanna be able to actually type into the header of the panel.

  4. #4
    Ext User
    Join Date
    Jun 2010
    Posts
    40
    Vote Rating
    0
      0  

    Default

    Well, it's easy enough to dynamically change the content of something via the DOM, don't know about using extJS controls to do it.

    What you could do is use the headerCfg to create your custom header - styling should be easy enough. In there you could have a div with the content you want as editable, assuming just text only and no formatting etc. Attach an onclick and in that onclick you change the content of the div to be a textbox, transparent background, no border. You could even have a little icon or something when you mouseover that you have to click on - personal preference I guess.

    Catch key presses for return to finish editing and also blur so clicking away will finish and change the content of the header.

    You'd also need something to save the new value somewhere but that would depend on the implementation.

    Sound like the kind of thing you're looking for?
    The golden rules of programming
    1. If it ain't broke, don't fix it
    2. Simple is good
    3. Just because you can doesn't mean you should.

    The Rule of 5: If your software has 5 bugs or more, it isn't fit for release
    The Rule of Trust: Never trust a software developer whose job title is not software developer/engineer.

  5. #5
    Ext User
    Join Date
    Mar 2010
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Correct, it is exactly what I need, but how do I create a listener for the header, how do I refer to it?
    If I use the default xtype:'tabpanel' I have only the headerCfg property for the header. I don't see any events connected to it.
    I would want first the header to throw some onClick event, then, ya, to become a transparent textbox and then be editable.
    Anywho, how do I refer to the header at all?
    How do I set what type of input it is?
    It looks to me as if by default it is a list item. To change it, I assume I should use something like:
    Code:
    headercfg:{
    tag:'?',
    cls: 'x-panel-header',
    //moreproperties
    }

  6. #6
    Ext User
    Join Date
    Jun 2010
    Posts
    40
    Vote Rating
    0
      0  

    Default

    The header, as far as I can see, is a DomHelper and has an html propert exposed. So, in theory, something like this would work:

    Code:
    // for the panel
    new Ext.Panel({
     headerCfg: {
      useDom: true,
      html: "<div onclick=\"InitClick(event, this)\">Content Here</div>"
     }
    });
    
    // and the function
    function InitClick(evt,ctl) {
     evt=evt?evt:event;
     tgt=Ext.isIE?evt.srcElement:evt.target;
     tgt.innerHTML="<input type=\"text\" style=\"border:0px;width:100%;height:100%;background-color:transparent;\" onblur=\"LoseFocusEvent(event,this)\" onkeypress=\"IsKeyReturn(event,this)\" id=\"magictxtControl\" value=\""+tgt.innerHTML+"\" />";
    }
    This would be a starting point and it wouldn't/shouldn't take much to finish it. The LoseFocusEvent should take the value property and pop it into the DIV, and IsKeyReturn checks the charCode/keyCode - some browser specific stuff there. Formatting may need to be played with but this should mostly do it.

    Let me know how you get on.
    The golden rules of programming
    1. If it ain't broke, don't fix it
    2. Simple is good
    3. Just because you can doesn't mean you should.

    The Rule of 5: If your software has 5 bugs or more, it isn't fit for release
    The Rule of Trust: Never trust a software developer whose job title is not software developer/engineer.

  7. #7
    Ext User
    Join Date
    Apr 2010
    Posts
    11
    Vote Rating
    0
      0  

    Default

    I forgot to mention that I want actually to edit the headers of the tabs in the tab panel. Seems to me that they are just the headers of the children of the parent tabpanel (and those children by default are simple panels). Therefore, in theory, the following configuration should work:
    Code:
    {
                  region:'center',
                  xtype:'tabpanel',
                  id:'DashboardTabPanel',
                  layoutOnTabChange:true,
                  items:
                   [
                       { headerCfg:{
                            useDom: true,
                            html: "<div onclick=\"InitClick(event, this)\">Content Here</div>"
                       },
                       height:200,
                       width:200,
                       frame:false
                       }
                   ]
               }
    However, when this panel with a custom header is a child of a tabpanel, nothing happens. The child header is fully empty and not rendered correctly. If, on the other hand, the panel with the custom header is a standalone panel, (not a child of a tabpanel), it works.

    I wonder how come?


    Edit:
    Even if I set the html: property to something like:
    Code:
    html:'blablabal'
    I get an empty header, like this:
    capturexr.jpg

    Here is the firebug of the fragment:

    Code:
    <li class="">
        <a class="x-tab-strip-close">
        </a>
            <a href="#" class="x-tab-right">
                <em class="x-tab-left">
                    <span class="x-tab-strip-inner">
                        <span class="x-tab-strip-text ">
                        </span>
                    </span>
                </em>
            </a>
    </li>
    For some reason, the header is ignored and replaced with a default header, but with no title (figures...).

  8. #8
    Ext User
    Join Date
    Jun 2010
    Posts
    40
    Vote Rating
    0
      0  

    Default

    The principle is the same regardless of the element you wish to edit so yes, it should work just fine. ContentEditable would work too but it has its own issues and I know this technique works with pretty much any browser without too many headaches - been using it since the early days of IE4.
    The golden rules of programming
    1. If it ain't broke, don't fix it
    2. Simple is good
    3. Just because you can doesn't mean you should.

    The Rule of 5: If your software has 5 bugs or more, it isn't fit for release
    The Rule of Trust: Never trust a software developer whose job title is not software developer/engineer.

  9. #9
    Sencha User
    Join Date
    Apr 2008
    Location
    Hong Kong
    Posts
    171
    Vote Rating
    0
      0  

Similar Threads

  1. Editable column Header
    By issameddine in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 12 May 2010, 7:59 AM
  2. editable Header of datagrid
    By hinaoth in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 21 Nov 2008, 5:09 AM
  3. How to apply css in Editable grid header
    By gopal_lal in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 20 Aug 2008, 11:56 PM

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
  •