horcle_buzz horcle_buzz - 8 months ago 116
CSS Question

multiselector search in ExtJS Kitchensink

I have modified the Multi-Selector Grid under the Form Fields menu option in the extJS Kitchensink example (http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#multi-selector).

var ms = Ext.create('Ext.container.Container', {
xtype: 'multi-selector',
width: 300,
height: 300,
requires: [
layout: 'fit',

renderTo: Ext.getBody(),
items: [{
xtype: 'multiselector',
title: 'Selected Dx',

fieldName: 'string_value',

viewConfig: {
deferEmptyText: false,
emptyText: 'No Dx selected'

search: {
field: 'string_value',

store: {
fields: [
name: 'string_value',
type: 'string'
proxy: {
type: 'ajax',
url: '',
reader: {
type: 'json',
rootProperty: '0'


It works, for the most part, but when I click on the search button, it looks like this:

My Multi-Selector Search box

as opposed to the one in Kitchensink, which looks like:

Kitchensink version of Search Box

As you see, the Kitchensink search box has the check boxes in from of the listed items, while mine doesn't. Thus, I am unable to select multiple items.

I figured this was due to a missing CSS file, but other than the kitchensink css file, I am not sure what to use.

For what it's worth, when I hover over

xtype: 'multi-selector',

in WebStorm, I get a message that "Ext JS class for type 'multi-selector' not found"


Sho' 'nuf: Added <link rel="stylesheet" type="text/css" href="resources/css/style.css"/> to index.html, did a "sencha app build" and all is well!

See here: Correct output with checkboxes

Interestingly, when I uncheck the items from the search list, they do not get removed from the selected pane.

See here: Unchecked