Is there a way to separate the options of a Sencha Touch select list similar to using optgroups? I have options that need to appear like they are grouped under a few different headings. In regular HTML markup it would look something like:
<select>
<optgroup label="First Group">
<option value="A">OptionA</option>
<option value="B">OptionA</option>
<option value="C">OptionA</option>
</optgroup>
<optgroup label="Second Group">
<option value="D">OptionA</option>
<option value="E">OptionA</option>
<option value="F">OptionA</option>
</optgroup>
</select>
Thanks for your time in advance!
There isn't any way to do this out of the box, however a selectfield is built on and extends the true List component which does have grouping/header functionality. You can force a selectfield to use the list overlay style (Ext.List) instead of the docked spinner style (Ext.picker.Picker) by setting usePicker to false. You can also set the defaultTabletPickerConfig config and provide an object with an items property. In the items set up a single item with an xtype of list, and go wild setting up whatever list component configuration you want (including your grouping/headers).
Take a look at the documentation for these properties under Ext.field.Select.
Related
I'm new to VueJS.
I'm trying to validate vue-select using vee-validate.
I've tried to validate it manually but of course its not a good approach.
So, I tried to use vuelidate but couldn't get the desired result.
Now i'm trying to use vee-validate. Validation works fine as desired
but the issue is v-model.
I created a global variable product, to calculate the length of array, and passed it in v-model. So that when Its empty product's value will be zero and i can return desired result from vee-validation.
Here's the .vue html part.
<ValidationObserver>
<form #submit.prevent="add">
<div class="row row-xs mx-0">
<label class="col-sm-4 form-control-label">
<span class="tx-danger">*</span> Add product(s):
</label>
<div class="col-sm-8 mg-t-10 mg-sm-t-0">
<ValidationProvider rules="required" v-slot="{ errors }">
<v-select
name="product"
placeholder="Add product(s)"
:options="availableProducts" <-- here is the options array
:reduce="name => name"
label="name"
#input="setSelected"
v-model="product" <-- this calculates length and pass it to vee **extends**
>
</v-select>
<div v-for="error in errors" :key="error"> {{ error }} </div>
</ValidationProvider>
</div>
<!-- col-8 -->
</div>
</form>
</ValidationObserver>
Here's validation.js file
import { extend } from 'vee-validate';
extend('required', value => {
console.log(value);
return value > 0;
});
I don't want this product value there. I know its not a good approach as well. I can't pass whole array to v-model because then I can't push options in it. I can't pass a single option to v-model as well then I won't get desired result.
All I want to validate v-select when options array is empty. Any suggestions?
Veevalidate doesn't validate directly on select elements. This is my workaround.
You should create a v-field "hidden" input and a visible select v-model element. The veevalidate will take place on the v-field.
Here is an example.
<v-field type="text" class="form-control disabled" name="expirationMonth" v-model="expirationMonth" :rules="isRequired" style="display:none;"></v-field>
<select v-model="expirationMonthUI" class="form-control" #click="synchExpirationMonthUI">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<error-message name="expirationMonth"></error-message>
Then add this to your methods to synch both together.
synchExpirationMonthUI() {
this.expirationMonth = this.expirationMonthUI;
}
I have found a way of doing this, with the Rendering Complex Fields with Scoped Slots from the Vee-Validate documentation. And using the bindings from Vue Select, it looks something like this:
<Field name="supportType" v-slot="{ field }" v-model="supportType">
<v-select :options="mediaTypes" label="name" :reduce="mediaType => mediaType.id" v-bind="field">
</v-select>
</Field>
As you can see, I am using here the name, v-slot and v-model for the Field from Vee-Validate, as normal. But the v-slot is very important as it carries the information from Vue Select to Vee-Validate, or at least I think so.
On the other hand I use the options, label, reduce and v-bind from Vue Select, these I use to handle the information. So with the :options I select my dataset, with label I tell Vue Select which label to select and show from the dataset, with :reduce I tell Vue Select what will be the value of the select tag and finally use v-bind to bind the value of the select to the Vee-Validate field. So the information used on the :reduce property will be displayed on the v-model="supportType".
I tested it with a button and it worked. And I liked this way so it is not that messy and I can use the validation and other things as usual.
Hope this helps anyone.
PD: I am using Vue 3, and the latest package of both Vee-Validate and Vue Select, as of today.
I'm trying to implement 1-way binding. What I want is that changing dropdown should affect the text in <p> and the text. Change tag should effect only text within <p>. But when I change the dropdown value, I lost the value within the <p> as well as within the tags
<span class="wt-select">
<select id="student_skill" v-model="selected">
<option v-for="(stored_skill, index) in stored_skills" :key="index.id" :value="stored_skill.id">{{stored_skill}} hours</option>
</select>
<p>{{ selected }}</p>
<input :value="selected" type="text" class="form-control" id="date_time">
</span>
How can I achieve this? I tried the following link, but still unable to achieve this one-way binding:
Vue.js get selected option on #change
Take the following code which is essentially going to render a form stepper and for the purposes of simplifying my example I have included just one step:
<form-wizard :formdata="this.form_data">
<form-tab stepindex="1" title="Title of Tab" :selected="true">
<div class="col-md-11 col-lg-10">
<div class="form-group">
<label for="OptionType" class="sr-only">Option Type</label>
<select v-model="form_data.optionType" #change="onChangeOptionType" id="OptionType">
<option value=""/>
<option v-for="option in form_data.fees" v-bind:value="option.cost">
{{ option.text }}
</option>
</select>
</div>
</div>
</form-tab>
</form-wizard>
For reasons I cannot understand the values are bound to the select options as expected and without error however the option text throws an error in the browser console that I cannot seem to overcome.
Property or method "option" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
It's like for some reason it is looking out to the wider scope for the option rather than the option in the v-for loop.
I'd appreciate any advice on how to correct this but also any help to try and understand why this is even the case.
If any additional information is required to help answer please let me know.
maybe the problem is v-bind:key on v-for
<select v-model="form_data.optionType" #change="onChangeOptionType" id="OptionType">
<option value=""/>
<option v-for="(option, i) in form_data.fees" v-bind:key="i" v-bind:value="option.cost">
{{ option.text }}
</option>
</select>
Suppose I have this component:
<b-select id="selectfield" :src="['a', 'b']"></b-select>
Which renders into:
<select id="selectfield">
<option value="a">a</option>
<option value="b">b</option>
</select>
Can I "find" the instance for my b-select component based on its "el" (which in this case would be its id)?
I don't know if it's possible with the "public" API but you can get the Vue instance from the __vue__ DOM property of any element that is a root mount for a component.
document.getElementById('selectfield').__vue__
As to whether or not you should use it.. Vue's author says the Vue devtools rely on it, so it's unlikely to change. See https://github.com/vuejs/vue/issues/5621
I have a small doubt over here on selecting one of the value from the drop down using selenium . When i generated a code using selenium-IDE it gave me a set of codes for selecting from the drop-down .
Code is as follows-->
driver.findElement(By.cssSelector("input.search")).click();
driver.findElement(By.xpath("//table[#id='project-add-table']/tbody/tr[4]/td[3]/div/div[2]/div[3]")).click();
new Select(driver.findElement(By.cssSelector("select"))).selectByVisibleText("Test");
So can anybody tell what is the use of that second line of code ?After clicking to the dropdown why cant we directly select the required element?
HTML -->
<td class="environmentTd" required="">
<div class="ui fluid search dropdown env selection">
<select>
<option value="SB">Sandbox</option>
<option value="DEV">Development</option>
<option value="QA">Test</option>
<option value="PROD">Production</option>
<option value="PP">Pre Production</option>
<option value="UAT">UAT</option>
<option value="DR">DR</option>
</select>
<i class="dropdown icon"></i><input class="search" autocomplete="off" tabindex="0">
<div class="text">Sandbox</div>
<div class="menu transition hidden" tabindex="-1">
<div class="item active selected" data-value="SB">Sandbox</div>
<div class="item" data-value="DEV">Development</div>
<div class="item" data-value="QA">Test</div>
<div class="item" data-value="PROD">Production</div>
<div class="item" data-value="PP">Pre Production</div>
<div class="item" data-value="UAT">UAT</div>
<div class="item" data-value="DR">DR</div>
</div>
</div>
</td>
If your select tag is visible in DOM without you clicking the dropdown, just use the third line
Select select = new Select(driver.findElement(By.cssSelector("select")));
select.selectByValue("QA");
Otherwise, click on the dropdown which will probably generate the DIV with class
class="menu transition hidden"
and then you can use the select line.
U don't really need to click on dropdown. U need to find dropdown as WebElement, convert it to SelectElement and use it's class method to select option.
I assume, that in provided code you click on dropdown, then click on opened fields with options. But I think it's a lot of unnecessary actions. Unless you have any scripts, triggered by that clicks, which must be tested.
From your description it sounds like the SELECT element isn't visible until the 2nd click happens. It's also possible that the 2nd click creates the SELECT element via Javascript. You could investigate this by using the Chrome devtools and search for the SELECT element before the 2nd click happens. See if it exists or maybe exists but is not visible. Then click on the 2nd element and see how the HTML changes. Without access to the site, that's about as good an explanation as we can provide. It's not something I would worry about. It's just the way the site is designed.