webix-jet icon indicating copy to clipboard operation
webix-jet copied to clipboard

richselect component getValue() not used

Open hjx777 opened this issue 2 years ago • 1 comments

Hello, I'm using webix-jet to build a web page. This page need provide a form to get different filtering conditions. I use richselect component and some input to complete this ,but there are some difficult.

  1. In this form, "filter_compare_input" has two style and it controlled by richselect which name is text2. But there has some error,the "filter_compare_input" can't display in the web page, I also try using function,but it has same question. I had saw the webix-jet-demo, but can't resolve this. Meanwhile , I try to use $$("text2").getValue() ,but failed , this code is can be used in Webix Code Sample,and failed in here. The code as follow:

  2. Because of there are multi filtering conditions, would I can get different value by getValue()? Or,it needs some other functions?

var filter_compare_input;
var filter_compare_input1 = {cols:[
	{ view:"text", name:"startvalue",label:"From:",inputName:"startvalue",labelPosition:"left"},
	{ view:"text", name:"endvalue",label:"To:",inputName:"endvalue",labelPosition:"left"},
]};
return {
	rows:[
		{
			view:"form",
			localId:"filter_form",
			rows:[
			        filter_shotNum,
				filter_keyword,
				{
					cols:[{
						width:250,cols:[{
							view:"richselect",id:"richselect3",value:1,inputWidth:110,
										options:[
											{ id:1, value:"IP(KA)" },
											{ id:2, value:"HCN(KV)" },
											{ id:3, value:"Shot_Len(S)"}
										],},		
						{view:"richselect",name:"text2",value:1,inputWidth:110,
										options:[
											{ id:1, value:"Large than >" },
											{ id:2, value:"Less than <" },
											{ id:3, value:"Range"}
										],on:{
												onChange(id){
													console.log(id)
													if(id == 3){
														filter_compare_input = filter_compare_input1
													}
													else{
														filter_compare_input = { view:"text", name:"compare_value",placeholder:"Input value",inputName:"compare_value"}
													}
												}
											}
									},]
								},
								// this is a input component and it has two style
								filter_compare_input,
							]

Thank you for answer.

hjx777 avatar Feb 21 '23 07:02 hjx777

var filter_compare_input;
var filter_compare_input1 = {cols:[
	{ view:"text", name:"startvalue",label:"From:",inputName:"startvalue",labelPosition:"left"},
	{ view:"text", name:"endvalue",label:"To:",inputName:"endvalue",labelPosition:"left"},
]};
return {
	rows:[
		header,
	{
		view:"form",
		localId:"filter_form",
		rows:[{
			cols:[{width:250,cols:[{
				view:"richselect",id:"richselect3",value:1,	inputWidth:110,
				options:[
					{ id:1, value:"IP(KA)" },
					{ id:2, value:"HCN(KV)" },
					{ id:3, value:"Shot_Len(S)"}
				],},		
				{view:"richselect",name:"text2",value:1,inputWidth:110,
				options:[
					{ id:1, value:"Large than >" },
					{ id:2, value:"Less than <" },
					{ id:3, value:"Range"}],
				on:{
					onChange(id){
	                                        console.log(id)
						if(id == 3){
							filter_compare_input = filter_compare_input1
						}
						else{
							filter_compare_input = { view:"text", name:"compare_value",placeholder:"Input value",inputName:"compare_value"}}}}},]},	

// this is a input component and it has two style
		filter_compare_input,

	{view:"richselect",	name:"richlogic2",value:1,inputWidth:200,label:"Logical:",
	options:[{ id:1, value:"and" },
	{ id:2, value:"or" },],
	on:{
	           onChange:() => getParam(this.$$("filter_form"))
	}},]}]}

hjx777 avatar Feb 21 '23 07:02 hjx777