Results 1 to 8 of 8

Thread: How to remove selective options form a dropdown created using the Ext.menu.CheckItems

  1. #1

    Default Answered: How to remove selective options form a dropdown created using the Ext.menu.CheckItems

    I have a dropdown for datepicker that im using to select dates. I'm using the Ext.menu.Checkitem to create a dropdown like below:
    Code:
      
    fields: [
          filter: {  ype: 'string',
                          xtype: 'superdate-search-field',
                         fieldLabel: "Date"
                        }
    ]
    Code:
    dd = {};            
    dd.week = new Ext.menu.CheckItem({  
        text: 'Week'
       });
    dd.month = new Ext.menu.CheckItem({                  
    text: 'Week'
                });
    dd.year = new Ext.menu.CheckItem({                
     text: 'Week'
    
                });
                dd.lastWeek = new Ext.menu.CheckItem({                  
    text: 'Week'
                });
    From the above list I'd like to remove 'week' and 'month' items from the list on render.
    Code:
     this.on('render', function() {                
    //remove the 'week' and 'month' options
    
                }, this});
    Is there any method or a specific way to do so?

  2. That is even easier. Simply put the listener on the viewport instead of the item. I have modified my fiddle:

    https://fiddle.sencha.com/#fiddle/1c9p

  3. #2
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    I am not quite clear what your question is. What exactly does a date picker have to do with a menu check item?

    Assuming these items are added to an Ext menu, you can simply call remove() method on the menu to remove the items you want to remove.

    http://docs.sencha.com/extjs/4.2.0/#...-method-remove

  4. #3

    Default

    you're right. I did that as the Main component using is the datepicker, but the way the options are populated inside the date picker is using the "Ext.menu.CheckItem".
    Edited my question title;
    The remove method is ok, but I'm sure how to apply that for multiple removal of items form the list.attached is the sample of how the dropdown looks. Say i want to remove the week and month from the list and the list created as shown in question. Is there a way?
    Attached Images Attached Images

  5. #4
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    You can simply have a common attribute for all the menu items you want to remove and use componentquery along with remove() to remove them Take a look at this fiddle:

    https://fiddle.sencha.com/#fiddle/1c9p

  6. #5

    Default

    In my case I wont be able to add listener as it should hide the items on render. Hence i tried this but didnt get to work:https://fiddle.sencha.com/#fiddle/1c9q

    im missing out lot i know, just dont know how to do it. I may sound naive on this as this is my first little exercise im trying on EXTJS

  7. #6
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    Quote Originally Posted by tsensuous.grace View Post
    In my case I wont be able to add listener as it should hide the items on render. Hence i tried this but didnt get to work:https://fiddle.sencha.com/#fiddle/1c9q
    this.on('render') itself is adding a listener. You need to place your "Super dateField" inside the viewport.
    Why dont you start with this basic guide:

    http://docs.sencha.com/extjs/4.2.0/#...etting_started

    Then work your way to adding the fields in your items array inside the viewport , and then listen to the render event of your datefield in order to remove the items. Also the fiddle you provided is not going to work at all. All items need to be a part of the "items" array config.
    Do you have some kind of layout mock up that you are trying to achieve?

  8. #7

    Default

    The only layout (shown in the attachement above) is to remove the 2 items from the list on page load.

  9. #8
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    That is even easier. Simply put the listener on the viewport instead of the item. I have modified my fiddle:

    https://fiddle.sencha.com/#fiddle/1c9p

Similar Threads

  1. Replies: 0
    Last Post: 19 Jun 2016, 11:39 AM
  2. Replies: 1
    Last Post: 30 Jun 2014, 11:20 AM
  3. Live Search Grid Panel, hide or remove tbar items
    By joaquingt in forum Ext: Q&A
    Replies: 2
    Last Post: 28 Mar 2013, 3:17 PM
  4. Ext.PDate [4] (Extjs persian date) with date picker and date field
    By vahid4134 in forum Ext:User Extensions and Plugins
    Replies: 38
    Last Post: 9 Mar 2013, 3:18 AM
  5. [FIXED] Search field dragged onto form gets incorrect component (typo in generated field)
    By scottd in forum Sencha Architect 2.x: Bugs
    Replies: 1
    Last Post: 23 Apr 2012, 8:42 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
  •