DualListField in sencha in disabled mode

Question

I am using DualListField widget from sencha (com.sencha.gxt.widget.core.client.form.DualListField) as mentioned in this example (http://www.sencha.com/examples/#ExamplePlace:duallistfield).

I would like to render this in disabled mode (in my read only view). I am calling

  field.setEnableDnd(enabled);
  field.setEnabled(enabled);

This disables the drag and drop, and shows the widget in grey-ed out format. But, it still renders the button and they are still clickable and works normally.

I am just wondering if there is any way to disable them ? I tried to extends the class but didn't find any method to disable them. Can somebody please help.

Thanks.

Answer 1

class CustomDualListField<D, T> extends DualListField<D, T> {

   public CustomDualListField(ListStore<D> fromStore, ListStore<D> toStore,
         ValueProvider<? super D, T> valueProvider, Cell<T> cell) {
      super(fromStore, toStore, valueProvider, cell);
   }

   private boolean enabled = true;

   @Override
   public void setEnabled(boolean enabled) {
      this.enabled = enabled;
      setEnableDnd(enabled);
      super.setEnabled(enabled);
   }

   @Override
   protected void onAllLeft() {
      if (!enabled) {
         return;
      }

      super.onAllLeft();
   }

   @Override
   protected void onAllRight() {
      if (!enabled) {
         return;
      }

      super.onAllRight();
   }

   @Override
   protected void onRight() {
      if (!enabled) {
         return;
      }

      super.onRight();
   }

   @Override
   protected void onLeft() {
      if (!enabled) {
         return;
      }

      super.onLeft();
   }
}