Alien-Web-ExtJS-V3
13 results

 view release on metacpan or  search on metacpan

share/docs/source/Combo.html  view on Meta::CPAN 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-form-ComboBox-method-constructor'><span id='Ext-form-ComboBox'>/**
</span></span> * @class Ext.form.ComboBox
 * @extends Ext.form.TriggerField
 * &lt;p&gt;A combobox control with support for autocomplete, remote-loading, paging and many other features.&lt;/p&gt;
 * &lt;p&gt;A ComboBox works in a similar manner to a traditional HTML &amp;lt;select&gt; field. The difference is
 * that to submit the {@link #valueField}, you must specify a {@link #hiddenName} to create a hidden input
 * field to hold the value of the valueField. The &lt;i&gt;{@link #displayField}&lt;/i&gt; is shown in the text field
 * which is named according to the {@link #name}.&lt;/p&gt;
 * &lt;p&gt;&lt;b&gt;&lt;u&gt;Events&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
 * &lt;p&gt;To do something when something in ComboBox is selected, configure the select event:&lt;pre&gt;&lt;code&gt;
var cb = new Ext.form.ComboBox({
    // all of your config options
    listeners:{
         scope: yourScope,
         'select': yourFunction
    }
});

// Alternatively, you can assign events after the object is created:
var cb = new Ext.form.ComboBox(yourOptions);
cb.on('select', yourFunction, yourScope);
 * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
 *
 * &lt;p&gt;&lt;b&gt;&lt;u&gt;ComboBox in Grid&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
 * &lt;p&gt;If using a ComboBox in an {@link Ext.grid.EditorGridPanel Editor Grid} a {@link Ext.grid.Column#renderer renderer}
 * will be needed to show the displayField when the editor is not active.  Set up the renderer manually, or implement
 * a reusable render, for example:&lt;pre&gt;&lt;code&gt;
// create reusable renderer
Ext.util.Format.comboRenderer = function(combo){
    return function(value){
        var record = combo.findRecord(combo.{@link #valueField}, value);
        return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};
    }
}

// create the combo instance
var combo = new Ext.form.ComboBox({
    {@link #typeAhead}: true,
    {@link #triggerAction}: 'all',
    {@link #lazyRender}:true,
    {@link #mode}: 'local',
    {@link #store}: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]
    }),
    {@link #valueField}: 'myId',
    {@link #displayField}: 'displayText'
});

// snippet of column model used within grid
var cm = new Ext.grid.ColumnModel([{
       ...
    },{
       header: &quot;Some Header&quot;,
       dataIndex: 'whatever',
       width: 130,
       editor: combo, // specify reference to combo instance
       renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
    },
    ...



( run in 0.816 second using v1.01-cache-2.11-cpan-411bb0df24b )