Extended learning ExtJS components list box Ext.ux.Multiselect

An extension to use ExtJS: Ext.ux.Multiselect, that is, the list box component. Correlation processing of the components and data binding, dynamic setting

  Summarize the method of dealing with small  :

  One. Data Binding  

//  Create a record type  person

var person = Ext.data.Record.create([

{ name: 'tValue', mapping: 1 },

{ name: 'tText', mapping: 2 },

]);//  Create a data parser  

var reader = new Ext.data.ArrayReader({ id: 0 }, person);//  Create HttpProxy agent  

var proxy = new Ext.data.HttpProxy({

url: '/Admin/Theme.aspx?Action=ThemeList'

});//  Create a data set  Store

var store = new Ext.data.Store({

autoLoad: true,

proxy: proxy,

reader: reader


.......................//  Some code  

//  Create Ext.ux.Multiselect components  

new Ext.ux.Multiselect({

id: "theme", name: 'theme',

dataFields: ["tValue", "tText"],

store: store, //  Or use the following data  :

//data: [["1", "  Root  "], ["2", "Image"], ["3", "CSS"], ["4", "JavaScript"], ["5", "resources"]],

valueField: "tValue",

displayField: "tText",

width: 200,

height: 100,

legend: "  Topic list  "

}),.......................//  Some code  

  II. Dynamic set of data items  

var themeStore = Ext.getCmp('theme').store;

if (themeStore != null) {

var record = new Object();

record.tValue = "2";

record.tText = "3";

themeStore.add(new Ext.data.Record(record));

  In fact, the operation here, is only operating  Ext.data.Store  Objects, such as the operation of deleted items  ,  Can query the API documentation  .  In addition, the following lines  :

var themeStore = Ext.getCmp('theme').store;

  Not in the rendering  (render)  Direct access to the event, because  render  Events such as  :Ext.getCmp('theme'),  Not the object is to obtain  (  The reasons for delay  ).

  The solution can be used Ext.util.TaskRunner object  .  Other issues under study  ...

  III. Data entry for  

  Method One  :


  Method Two  :


  Note  :fPanel  Multiselect belongs to  FormPanel  Objects, and the value of this method to get  ,  Must be defined to Multiselect  name  Properties  (  Here is   'theme').

  Method Three  :

listeners: {

"click": function(mult, e) {

var value = e.target.innerText;

if (value == null || value == "") {




Ext.getCmp('theme').setValue(value);   //m.store.getAt(e.target.viewIndex).data


}   Note  :  Only in the click event  ,  In fact here is only displayed e.target.innerText  displayField  Field, not value  .  The  "m.store.getAt(e.target.viewIndex).data"  Click to get to the last line of Record objects  ,  And of course it contains valueField  displayField  Two fields. About how to obtain only  displayField,  Consider the following fifth  .

  IV. Set the radio data items can only be  

  In fact, I originally used the purpose is to set the Multiselect  ComboBox  Higher, so more data elements can browse  .  However, at least until now not found   Multiselect  Object has such a property to set the radio only  (  Found no source of  ),  Ever thought of such a stupid way  :  Click the data to get the last item, and set   ComboBox  The value of the final value of one-click data entry, as  :

new Ext.ux.Multiselect({

id: "theme",

name: "theme",

dataFields: ["tValue", "tText"],

store: themeStore,

valueField: "tValue",

displayField: "tText",

width: 200,

height: 100,

legend: "  Topic list  ",

listeners: {

"click": function(mult, e) {

var value = e.target.innerText;

if (value == null || value == "") {








  Note  :  Parameter e is  click  Arguments passed to the event, and  e.target.innerText  Click the data item is the current value, the method I only  IE  Been tested, other browsers not tested  ,  In order to solve the compatibility problem, you can use the following method to get  :

"click": function(mult, e) {

var values = fPanel.getForm().getValues(false)['theme'];

if (values == null || values == "") {




var items = fPanel.getForm().getValues(false)['theme'].split(',');

var item = items[items.length - 1];


}   Note  :fPanel  Belongs to the Multiselect  FormPanel  Objects, this method is actually the first resolution  Multiselect Components of the final value of one-click data entry, and then re-set  Multiselect  The value of the last time you can click the data item value. Obviously  ,  Method is more cumbersome than the previous point  .

  In addition, in fact, the previous method  ,  Parameters of what properties and methods of e  ,  I come to test, on-line access to a similar method  ,  As  :

function printf(obj) {

var props = "";

for(var p in obj){


//obj[p](); //  Members to get to a function, if non-essential  ,  Notes sentence, sometimes because this  js  Not run  .


props+= p + "=" + obj[p] + "\t";




}   In this way, you can print parameters  e  The members of which properties to test it  .  Methods  .

  Five. Multiselect extension in order to achieve access to  displayField  Field  

Multiselect.js  File, find the following lines  (3.0  Version  ):

getValue: function(valueField){



  Later add the following  :

getText: function(valueField) {

var returnArray = [];

var selectionsArray = this.view.getSelectedIndexes();

if (selectionsArray.length == 0) { return ''; }

for (var i = 0; i < selectionsArray.length; i++) {



return returnArray.join(this.delimiter);

},  Can be adopted  Ext.fly('theme').getText()  Access to the current selection of displayField all fields  .
分类:Web 时间:2010-09-04 人气:498
blog comments powered by Disqus


  • Control Box Component Layout 2010-05-24

    Box components you want to control both the horizontal and vertical layout, but also between control components and sub-horizontal and vertical components of the middle distance settings? Property while using verticalAlign and horizontalAlign directi

  • ExtJs xtype and component class in the corresponding table 2010-04-26

    Original Address: http://blog.sina.com.cn/s/blog_514ae3fd0100i36p.html Core Tip: We create a component using ExtJs most easily understood, of course, with new Ext.form.TextField ((fieldLabel: 'Name', id: 'name', width: 120)); we can use xtype (such a

  • ExtJs xtype and component class in the corresponding table and vtype 2010-08-07

    Write ExtJs related code will be more experience with xtype, here ExtJs components in the xtype and the corresponding component class table. Does not include Ext.ux namespace extension component. In fact, Ext API documentation in this list, in the Co

  • ExtJs xtype and component classes in the corresponding list of tables and ExtJs vtype 2010-12-14

    ExtJs write the relevant code will use xtype more experience, the following is xtype ExtJs components in the table with the corresponding component class. Does not include Ext.ux namespace extension component. In fact, Ext API documentation in this l

  • With the title and folding functions BOX 2010-04-01

    If there is a lot of page elements, if these elements are classified and can frame up with the edge, look becomes structured. Windows, there are many such forms, do not know why the sun and adobe do not provide a similar form, found in tourdeflex Box

  • Introduction to Win32 API 2010-03-19

    1.1 Why use the Win32 API In the Windows program design in the early days, Windows programmers can use the programming tools only API function. These functions are in the hands of programmers like "building block" the same can build a rich varie

  • MIDlet API 2.0 Learning: javax.microedition.midlet 2010-04-19

    Package Description: MIDlet package defines MIDP (Mobile Advisory equipment summary table) MIDlet package defines MIDP applications and application procedures and application information on the interaction between the operating environment. A MIDP ap

  • About Qt built-in dialog box 2010-07-13

    1.QErrorMessage error message dialog box QErrorMessage provides an error message dialog box that appears. An error message part consists of a text field and a check box component. Check box controls whether the user the next time also shows this erro

  • Android system, the search dialog (floating search box) use 2010-11-29

    When you need in your application to provide search services, your first thought is to put your search box where it? Search by using the Android framework, the application will display a custom search dialog box to handle the user's search request. T

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 闽ICP备15018612号

processed in 0.040 (s). 12 q(s)