Как создать индивидуальный элемент списка с флажком? - PullRequest
Новая
       23

Как создать индивидуальный элемент списка с флажком?

0 голосов
/ 03 июля 2018

Я создал список qooxdoo с настроенными элементами, содержащими флажок и метку. Моя проблема: когда я проверяю флажок, он становится больше, что дает неприятный пользовательский опыт. Также, когда я проверяю некоторые первые элементы и прокручиваю вниз, я вижу много отмеченных элементов, которые по умолчанию должны быть отключены.

Вот код, который кто-то может вставить в игровую площадку для qooxdoo : 

// Create a button
var button1 = new qx.ui.form.Button("click to see list!", "icon/22/apps/internet-web-browser.png");

// Document is the application root
var doc = this.getRoot();

// Add button to document at fixed coordinates
doc.add(button1,
{
  left : 100,
  top  : 50
});

var popup;
// Add an event listener
button1.addListener("execute", function(e) {
  if (!popup) {
    popup = new myApp.list();
  }
  
  popup.placeToWidget(button1);
  popup.show();
});

/*
 * class: list inside popup.
*/
qx.Class.define("myApp.list", 
{
	extend : qx.ui.popup.Popup,
	
	construct : function() 
	{
		this.base(arguments);
		this.__createContent();
	},
	
	members : {
		__createContent : function(){
			this.set({
				layout : new qx.ui.layout.VBox(),
				minWidth : 300
			});

			
			//prepare data
      var zones = [];
      for (var i=0; i<100; i++){
        zones.push({"LZN" : "ZONE " + i, "isChecked" : false});
      }
      
      var lstFences = new qx.ui.list.List();
			this.add(lstFences, {flex : 2});
			
			var delegate = {
	          createItem : function() {
	            return new myApp.customListItem();
	          },

	          bindItem : function(controller, item, id) {
	            controller.bindProperty("isChecked", "isChecked", null, item, id);
	            controller.bindPropertyReverse("isChecked", "isChecked", null, item, id);	          	
	            controller.bindProperty("LZN", "LZN", null, item, id);	          	            
	          }
      };
      		
      lstFences.setDelegate(delegate);
			lstFences.setModel(qx.data.marshal.Json.createModel(zones));
			lstFences.setItemHeight(50);
		}
	}
})


/**
 * The custom list item
 */

qx.Class.define("myApp.customListItem",  {
	extend : qx.ui.core.Widget, 
  
	properties :
	{
		LZN:
		{
		  apply 	: "__applyLZN",
		  nullable 	: true
		},
	
		isChecked :
		{
		  apply 	: "__applyChecked",
		  event		: "changeIsChecked",
		  nullable 	: true
		}
	},
	
	construct : function()
	{
		this.base(arguments);
	 	this.set({
		  	padding		: 5,
		  	decorator	: new qx.ui.decoration.Decorator().set({
		  					bottom 			: [1, "dashed","#BBBBBB"]
		  				})
		});
		
		this._setLayout(new qx.ui.layout.HBox().set({alignY : "middle"}));
	
		// create the widgets
		this._createChildControl(("isChecked"));
		this._createChildControl(("LZN"));
	},
	
	members :
	{
		// overridden
		_createChildControlImpl : function(id)
		{
	  	var control;
	
			switch(id)
			{
			    case "isChecked":
			    	control = new qx.ui.form.CheckBox();
			    	control.set({
			    		padding : 5,
			    		margin	: 8,
			    		value	: false,
			    		decorator	: new qx.ui.decoration.Decorator().set({
						  					width : 2,
						  					color : "orange",
						  					radius : 5
						  				})
		  			});
			    	this._add(control);
			    	break;
				
				case "LZN":
					control = new qx.ui.basic.Label();
					control.set({allowGrowX : true});
					this._add(control, {flex : 2});
			    	break;	
			  }
			
			  return control || this.base(arguments, id);
		},
	
		__applyLZN : function(value, old) {
			var label = this.getChildControl("LZN");
			label.setValue(value);
		},
		
		__applyChecked : function(value, old)
		{
			var checkBox = this.getChildControl("isChecked");
			console.log(value, old);
			checkBox.setValue(value);
		}
	}
});

1 Ответ

0 голосов
/ 03 июля 2018

Здесь есть две проблемы:

Первый - это тот факт, что при создании флажка в качестве подвиджета с помощью _createChildControlImpl флажок теряет свой внешний вид (в смысле появления темы qooxdoo), что приводит к атрибуту lost minWidth, который делает флажок шириной 0, когда не отмечен, и ширина, необходимая для отображения галочки, когда она отмечена. Решением здесь является добавление внешнего вида к классу myApp.customListItem, например:

properties : { appearance: { refine : true, init : "mycustomlistitem" } } и затем добавьте соответствующий вид вашей теме: appearances : { "mycustomlistitem" : "widget", "mycustomlistitem/isChecked" : "checkbox" } Вы также можете добавить все стили, которые вы сделали при создании флажков (оранжевый декоратор и т. Д.) В определении внешнего вида.

Вторая проблема заключается в том, что вы определили только одностороннюю привязку между подвиджетом флажка настраиваемого элемента списка и его подвиджетом isChecked. Здесь вам нужно двухстороннее связывание, поэтому, если значение свойства «isChanged» меняет его значение, оно переносит его в флажок и наоборот.

Я изменил пример вашей игровой площадки соответственно, создав недостающий вид на лету и создав двустороннюю привязку между флажком и свойством «isChecked» элементов списка. Обратите внимание, что я создал список прямо в корне приложения для простоты:

https://gist.github.com/level420/4662ae2bc72318b91227ab68e0421f41

...