Extended learning ExtJS components list box Ext.ux.Multiselect

sponsored links
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  . 
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Extended learning ExtJS components list box Ext.ux.Multiselect

  • Database design skills of 14

    1. Original documents and the relationship between entities can be one-on-one, one-to-many, many-to-many relationship. Under normal circumstances, they are one-on-one relationship: the one and only original documents corresponding to the corresponding one

  • Hibernate are garbage

    My personal opinion, Hibernate this kind of thing is purely garbage. See here for someone to Hopping , and so advanced things you Qigan slander it . Wait a minute anxious lit first calm down, this my opinion are the recent re-examine the VB of this a ...

  • Tutorial on ruby-debug

    Posted on July 11, 2006 Installation The installation procedure requires rubygems package and C compiler available. Two notes worth to mention: For Debian users, you must have ruby-dev package installed. For Windows users, I don't have a precompiled v

  • Using Ruby on Rails and Action Web Service to create Web Services

    Action Web Service module will be at Ruby on Rails implementation of Web services. Action Web Service will create the SOAP and XML-RPC Web Service Protocol server-side support. You can use the Declaration and the Action Web Service released the API. ...

  • Ext.ux.UploadDialog the use of sample components

    Ext.ux.UploadDialog the use of sample components Effect: Call to create HTML: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> </ title> <link rel="styleshe

  • Hibernate performance tuning (the focus of understanding)

    1. Object Cache: fine-grained, in view of the table Record Level, transparent access, without changing the procedure code can greatly enhance the performance of web applications. ORM object cache is a magic weapon for the victory. 2. The merits of th ...

  • Hibernate's FetchSize and MaxReslut

    Previously EJB to do paging, EJBQL only provide FirstResult and MaxReslut, recently discovered by Hibernate its HQL also provides FetchSize, checked under the API found almost mean, and then found the next line so someone said: setFetchSize is an opt ...

  • SUI-JavaScript rich UI library integration solution

    Introduction: SUI is not a class implementation of the UI, nor is it a standard set of UI markup language, it is just to help the existing UI frameworks (such as Ext, YUI like) to mark the way to the statement and the creation of UI. The names of these ta

  • Hibernate query: HQL and Criteria

    HQL query methods generally used in more general way through the query query. Examples are as follows: The Criteria is a more than HQL query object-oriented approach: Created as follows: Criteria crit = session.createCriteria (Object.class); crit.add ...

  • Software development sunflower Baodian [reprint]

    Master the ability to reuse code very familiar with the new API's fast. This is because, he once used a lot of the API, have a lot of reusable code. He knows what is available and what is deficient. He has been using Qt, also used by gtk +, also used

blog comments powered by Disqus
Recent Entries
Tag Cloud
Random Entries