PDA

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



tsensuous.grace
19 Jun 2016, 11:46 AM
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:


fields: [
filter: { ype: 'string',
xtype: 'superdate-search-field',
fieldLabel: "Date"
}
]


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.

this.on('render', function() {
//remove the 'week' and 'month' options

}, this});

Is there any method or a specific way to do so?

jdkhamba
19 Jun 2016, 12:24 PM
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/#!/api/Ext.menu.Menu-method-remove

tsensuous.grace
19 Jun 2016, 12:59 PM
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?

jdkhamba
19 Jun 2016, 1:59 PM
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

tsensuous.grace
19 Jun 2016, 3:51 PM
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

jdkhamba
19 Jun 2016, 4:13 PM
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/#!/guide/getting_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?

tsensuous.grace
19 Jun 2016, 4:16 PM
The only layout (shown in the attachement above) is to remove the 2 items from the list on page load.

jdkhamba
19 Jun 2016, 4:27 PM
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