ExtJs Combobox del conjunto local

Estoy intentando completar un cuadro combinado Ext Js usando la lista de arreglos locales. En los ejemplos de Ext Js, el combo se rellena desde un archivo states.js diferente.ExtJs Combobox del conjunto local

En mi ejemplo, los datos deben provenir de la variable local. No funciona.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Combo Boxes</title> 
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="../../ext-all.js"> 
</head> 

<body> 
<script type="text/javascript"> 
var exampleData2 = [['1', 'hello'],['2', 'hi'],['3', 'bye']]; 
Ext.onReady(function(){ 
Ext.QuickTips.init(); 

// simple array store 
var store = new Ext.data.ArrayStore({ 
    fields: ['abbr', 'state'], 
    data : exampleData2 
}); 
    var combo = new Ext.form.ComboBox({ 
    store: store, 
    displayField:'state', 
    typeAhead: true, 
    mode: 'local', 
    forceSelection: true, 
    triggerAction: 'all', 
    emptyText:'Select a state...', 
    selectOnFocus:true, 
    applyTo: 'local-states' 
    }); 
    </script> 

<div> 
<input type="text" id="local-states" size="20"/> 
</div> 
<div id="local-states" style="margin-top:10px"> 

</body> 
</html>

Fuente

2011-02-03 Precise-One

Se debe trabajar, sin embargo, ¿estás seguro de sus referencias a los archivos de la Ext JS son correctos? ¿Limpiaste tu caché del navegador para comprobar que no es un problema de almacenamiento en caché? – wimvds

@wimvds: se arregló. Había '});' falta al final de la javascript. –

alcance, alcance, alcance

 
Ext.onReady(function(){ 
    Ext.QuickTips.init(); // simple array store 
    var exampleData2 = [['1', 'hello'],['2', 'hi'],['3', 'bye']]; 
    var store = new Ext.data.ArrayStore({ 
    fields: ['abbr', 'state'], 
    data : exampleData2 
    // or even better data : [['1', 'hello'],['2', 'hi'],['3', 'bye']] 
    // next to change: combo.getStore().loadData(new_table); 
    }); 
    var combo = new Ext.form.ComboBox({ 
    store: store, 
    displayField:'state', 
    typeAhead: true, 
    mode: 'local', 
    forceSelection: true, 
    triggerAction: 'all', 
    emptyText:'Select a state...', 
    selectOnFocus:true, 
    applyTo: 'local-states' 
    }); 
});

para obtener una solución más compleja

 
Ext.ux.states = Ext.Extend (Ex.form.ComboBox, { ....

Fuente

2011-02-04 04:20:33 bensiu

A continuación, he creado una tienda, llamada Ext.data.FlatStore, que se extiende por defecto ArrayStore. Durante la construcción, los datos configurados se procesan.

{ 
    xtype: 'combo', 
    queryMode: 'local', 
    store: Ext.create('Ext.data.FlatStore', { 
     data: [ 'yes', 'no', 'maybe' ] 
    }) 
}

Demo @ JSFiddle

Ext.require(['*']); 

String.capitalize = function (str) { 
    return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase(); 
}; 

Ext.define('Ext.data.FlatStore', { 
    extend: 'Ext.data.ArrayStore', 
    config: { 
     data: [] 
    }, 
    fields: [{ 
     name: 'id', 
     type: 'int' 
    }, { 
     name : 'value' 
    }, { 
     name: 'display', 
     type: 'string', 
     convert: function (newValue, model) { 
      return String.capitalize(model.get('value')); 
     } 
    }], 
    constructor: function (config) { 
     var me = this; 
     config.data = config.data.map(function (value, index, values) { 
      return [index, value]; 
     }); 
     me.callParent(arguments); 
     me.loaded = true; 
    } 
}), 

Ext.define('App.view.MainView', { 
    extend: 'Ext.panel.Panel', 
    xtype: 'mainView', 
    alias: 'widget.mainview', 
    controller: 'mainView', 
    title: 'Outer Panel', 
    referenceHolder: true, 
    layout: { 
     type: 'border' 
    }, 
    initComponent: function() { 
     var me = this; 
     me.items = [{ 
      region: 'center', 
      xtype: 'panel', 
      title: 'Inner Panel', 
      margin: 20, 
      bodyStyle: 'padding: 8px;', 
      layout: 'vbox', 
      items: [{ 
       xtype: 'combo', 
       store: Ext.create('Ext.data.FlatStore', { 
        data: [ 'yes', 'no', 'maybe' ] 
       }), 
       displayField: 'display', 
       valueField: 'value', 
       fieldLabel: 'Response', 
       typeAhead: true, 
       queryMode: 'local', 
       forceSelection: true, 
       triggerAction: 'all', 
       emptyText: 'Choose...', 
       selectOnFocus: true, 
       applyTo: 'local-states' 
      }] 
     }], 
     me.callParent(); 
    } 
}); 

Ext.define('App.controller.MainViewController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.mainView', 
    init: function() { 
     var me = this; 
    } 
}); 

Ext.define('App.app.App', { 
    extend: 'Ext.app.Application', 
    name: 'App', 
    launch: function() { 
     Ext.create('Ext.Viewport', { 
      layout: 'fit', 
      flex: 1, 
      items: [{ 
       xtype: 'mainview' 
      }] 
     }); 
    } 
}); 

Ext.onReady(function() { 
    Ext.application('App.app.App'); 
});

Fuente

2015-02-03 18:29:44

ExtJs Combobox del conjunto local

Respuesta

Cuestiones relacionadas