I am trying to populate a Ext Js combo box using local array list. In the Ext Js examples, the combo is populated from a different states.js file.
In my example the data should come from local variable. Its not working.
<!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>
scope, scope, scope
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'
});
});
to get more complex solution
Ext.ux.states = Ext.Extend ( Ex.form.ComboBox, { ....
Below, I have created a store, called Ext.data.FlatStore, which extends the default ArrayStore. During construction, the configured data is processed.
{
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');
});
Related
I have a combo box that I need to get access to the store in code so that I can apply a filter to it. Here is the definition of the combo.
//ItemGeneralPanel.js
Ext.define('myCompany.view.item.ItemGeneralPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myApp.ItemGeneralPanel',
layout: 'vbox',
bodyPadding: 4,
defaults: { width: 800 },
items: [
{
xtype: 'combobox',
fieldLabel: 'Replenishment Source',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
bind: { value: '{item.sourceId}', store: '{replenishmentSourceList}' }
},
]
});
My ItemController has this in it:
//ItemController.js
stores: [
'item.ItemList',
'item.ReplenishmentSourceList'
],
And my store looks like this:
//ReplenishmentSourceList.js
Ext.define('myCompany.store.item.ReplenishmentSourceList', {
extend: 'Ext.data.Store',
model: 'myCompany.model.Source',
sorters: 'name'
});
And the model just has a list of fields(Source.js):
How do I reference this combo box in my controller so that I can get a reference to its store and then apply a filter to the results coming back. Something like this:
//ItemEditViewController.js
myFunction: function (facilId) {
this.lookup('replenishmentSourceList').getStore().load({
scope: this,
callback: function (records, operation, success) {
if (!success) {
Ext.log({ level: 'error', msg: 'Error loading facility list', dump: operation });
var text = (operation.getError() ? operation.getError().response.responseText : operation.getResponse().responseText);
var msg = Ext.decode(text).message;
Ext.Msg.show({ title: 'Error', msg: 'Error loading Source data.<br>' + msg, buttons: Ext.Msg.OK, icon: Ext.Msg.ERROR });
}
else {
this.lookup('replenishmentSourceList').getStore().setFilters({
property: 'facilityId',
operator: '==',
value: 'facilId'
});
This isn't working, so I figured if I could get the combobox, I could do something like:
myRefToComboBox.getStore()....
Any ideas?
If you want to get the store directly then you can simply use storeId and perform a lookup on created stores Ext.data.StoreManager.lookup('myStore') which will return the store instance. Refer docs for Ext.data.StoreManager.
Below is a sample which you can try out in fiddle (Check console as it prints the store instance using store manager):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('myCompany.store.item.ReplenishmentSourceList', {
alias: 'store.replenishmentSourceList',
extend: 'Ext.data.Store',
sorters: 'name'
});
Ext.define('myCompany.view.item.ItemGeneralPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myApp.ItemGeneralPanel',
layout: 'vbox',
bodyPadding: 4,
defaults: {
width: 800
},
items: [{
xtype: 'combobox',
fieldLabel: 'Replenishment Source',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
store: {
type: 'replenishmentSourceList',
storeId: 'myStore'
}
}, ]
});
Ext.create({
xtype: 'myApp.ItemGeneralPanel',
renderTo: Ext.getBody()
});
console.log(Ext.data.StoreManager.lookup('myStore'));
}
});
Edit
The above is one way to get the store, another way is to get the combobox or the panel view from controller using getView() and then get the store.
Below is the code with controller (check the console):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyApp.UserController', {
alias: 'controller.user',
extend: 'Ext.app.ViewController',
myFunction: function (facilId) {
console.log(this.getView())
console.log(this.getView().down('#replenishmentCombo').getStore());
}
});
Ext.define('myCompany.store.item.ReplenishmentSourceList', {
alias: 'store.replenishmentSourceList',
extend: 'Ext.data.Store',
sorters: 'name'
});
Ext.define('myCompany.view.item.ItemGeneralPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myApp.ItemGeneralPanel',
controller: 'user',
layout: 'vbox',
bodyPadding: 4,
defaults: {
width: 800
},
listeners: {
boxready: 'myFunction'
},
items: [{
xtype: 'combobox',
itemId: 'replenishmentCombo',
fieldLabel: 'Replenishment Source',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
store: {
type: 'replenishmentSourceList',
storeId: 'myStore'
}
}, ]
});
Ext.create({
xtype: 'myApp.ItemGeneralPanel',
renderTo: Ext.getBody()
});
// console.log(Ext.data.StoreManager.lookup('myStore'));
}
});
I'm using ExtJS 3.3.0 and I want to disable the save button until there is a value in the combo box.
I'm creating the combo box like so;
new Ext.form.ComboBox({
id: this.idName + 'Combo_StateID',
name: 'StateID',
fieldLabel: 'State',
singleOnly: true,
typeAhead: true,
triggerAction: 'all',
store: StateStore,
mode: 'remote',
valueField: 'StateID',
hiddenField: 'StateID',
displayField: 'StateNumber',
lazyInit: false,
listClass: 'x-combo-list-small',
tpl: '<tpl for=\".\"><div class=\"x-combo-list-item\"><span style=\"width: 50px;\">#{StateNumber}</span></div></tpl>',
}), " ) . "
I'm simply creating the button like so;
newPanel.addButton(
{
iconCls:'icon-ok',
text: 'Save Data'
}
)
This all works fine. but disabling the button I can't figure out at all.
I have tried the following, but still nothing;
listeners: {
afterrender: function() {
if (this.getValue() === null) {
Ext.getCmp('yourButton').setDisabled(true);
}
else {
Ext.getCmp('yourButton').setDisabled(false);
}
}
}
Any help would be greatly appreciated
As you have used afterrender it will Fires after the component rendering is finished.
Try to use select method of ExtJS Combobox
I have created an demo. You check here how it is working Sencha fiddle
Ext.onReady(function () {
var PanelMain = Ext.extend(Ext.Panel, {
title: 'My Panel',
initComponent: function () {
Ext.applyIf(this, {
items: [{
xtype: 'combo',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [
[1, 'item1'],
[2, 'item2']
]
}),
valueField: 'myId',
displayField: 'displayText',
editable: false,
listeners: {
select: function (combo, record) {
Ext.getCmp('saveButton').setDisabled(false);
}
}
}, {
xtype: 'button',
id: 'saveButton',
iconCls: 'icon-ok',
disabled: true,
text: 'Save Data',
handler: function () {
//here you can put your logic..
}
}]
});
PanelMain.superclass.initComponent.call(this);
}
}),
panel = new PanelMain({
renderTo: Ext.getBody()
});
});
I have the following model and store in my app.
My problem is that when I'm trying to load the records into the second store it doesn't work. I've tried different store methods and nothing (Store Manual).
In my app the first store records are loaded in a controller, where an Ajax call receives the data.products variable.
Any ideas what I'm doing wrong?
PS: I'm using ExtJs 4.1
Fiddle sencha
Ext.define('App.model.Product', {
extend: 'Ext.data.Model',
alias: 'model-product',
idgen: 'sequential',
fields: [
{ name: 'available', type: 'boolean', useNull: false, defaultValue: true },
{ name: 'country', type: 'int', useNull: false },
{ name: 'key', type: 'string', useNull: false },
{ name: 'name', type: 'string', useNull: false }
],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'products'
}
}
});
Ext.define('App.store.Product', {
extend: 'Ext.data.Store',
autoLoad: true,
autoSync: true,
groupField: 'id',
countryFilter: function(countryId) {
this.clearFilter();
this.filter('country', countryId);
return this;
},
getRecordsForCountry: function (countryId) {
var records = [];
this.findBy(function (record) {
if (record.get('country') === countryId) {
records.push(record.copy());
}
});
return records;
},
model: 'App.model.Product',
sorters: [ {
property: 'key',
direction: 'ASC'
} ],
sortOnLoad: true
});
Ext.onReady(function () {
var data = {
products: [{
country: 1,
key: 'test1',
name: 'Test1'
}, {
country: 2,
key: 'test2',
name: 'Test2'
}, {
country: 3,
key: 'test3',
name: 'Test3'
}]
};
var store = Ext.create('App.store.Product');
store.loadRawData(data, false);
var store2 = Ext.create('App.store.Product'),
records = store.getRecordsForCountry(1);
store2.add(records);
//tried also:
//store2.loadRecords(records);
//store2.loadData(records);
//store2.loadRawData(records);
var combobox = Ext.create('Ext.form.field.ComboBox', {
queryMode: 'local',
forceSelection: true,
displayField: 'name', // <-- Add this
valueField: 'key',
renderTo: Ext.getBody(),
store: store
});
var combobox2 = Ext.create('Ext.form.field.ComboBox', {
queryMode: 'local',
forceSelection: true,
displayField: 'name', // <-- Add this
valueField: 'key',
renderTo: Ext.getBody(),
store: store2
});
});
<link href="http://docs.sencha.com/extjs/4.1.1/extjs-build/resources/css/ext-all.css" rel="stylesheet"/>
<script src="http://cdn.sencha.com/ext/gpl/4.1.1/ext-all.js"></script>
Apparently these two settings:
autoLoad: true,
autoSync: true
screws the whole store up and calls load with empty records (triggerd by loadRawData, loadRecords, clearFilter, filter).
After setting these two to false the loading happens only on explicit call to the load methods.
Ext.define('App.model.Product', {
extend: 'Ext.data.Model',
alias: 'model-product',
idgen: 'sequential',
fields: [
{ name: 'available', type: 'boolean', useNull: false, defaultValue: true },
{ name: 'country', type: 'int', useNull: false },
{ name: 'key', type: 'string', useNull: false },
{ name: 'name', type: 'string', useNull: false }
],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'products'
}
}
});
Ext.define('App.store.Product', {
extend: 'Ext.data.Store',
autoLoad: false,
autoSync: false,
groupField: 'id',
countryFilter: function(countryId) {
this.clearFilter();
this.filter('country', countryId);
return this;
},
getRecordsForCountry: function (countryId) {
var records = [];
this.findBy(function (record) {
if (record.get('country') === countryId) {
records.push(record.copy());
}
});
return records;
},
model: 'App.model.Product',
sorters: [ {
property: 'key',
direction: 'ASC'
} ],
sortOnLoad: true
});
Ext.onReady(function () {
var data = {
products: [{
country: 1,
key: 'test1',
name: 'Test1'
}, {
country: 2,
key: 'test2',
name: 'Test2'
}, {
country: 3,
key: 'test3',
name: 'Test3'
}]
};
var store = Ext.create('App.store.Product');
store.loadRawData(data, false);
var store2 = Ext.create('App.store.Product'),
records = store.getRecordsForCountry(1);
store2.add(records);
//tried also:
//store2.loadRecords(records);
//store2.loadData(records);
//store2.loadRawData(records);
var combobox = Ext.create('Ext.form.field.ComboBox', {
queryMode: 'local',
forceSelection: true,
displayField: 'name', // <-- Add this
valueField: 'key',
renderTo: Ext.getBody(),
store: store
});
var combobox2 = Ext.create('Ext.form.field.ComboBox', {
queryMode: 'local',
forceSelection: true,
displayField: 'name', // <-- Add this
valueField: 'key',
renderTo: Ext.getBody(),
store: store2
});
});
<link href="http://docs.sencha.com/extjs/4.1.1/extjs-build/resources/css/ext-all.css" rel="stylesheet"/>
<script src="http://cdn.sencha.com/ext/gpl/4.1.1/ext-all.js"></script>
I have an in-line store that is inside of a simple combobox. This store has some default inline-data. Now I'm looking for an event that gets fired once the store is created and this event needs to supply me with the data that is in the store.
I tried it like this:
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
store: {
autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
listeners: {
load: function(store) {
let records = store.getData()
records.forEach(record => {
console.log(record.getField('name'))
})
}
}
},
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody()
});
But it doesn't work. store.getData() doesn't seem to contain my records.
There's my fiddle:
https://fiddle.sencha.com/?fiddle=v7#fiddle/1h53
Use this now store show console data:
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody(),
listeners: {
afterrender: function(me) {
var store = Ext.create('Ext.data.Store', {
//autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
listeners: {
datachanged : function(store) {
Ext.each(store.data.items,function(rec){
console.log(rec.data.name);
});
}
}
});
me.setStore(store);
store.load();
}
},
});
I finally managed to solve the problem by accessing the store after it's combobox is rendered:
https://fiddle.sencha.com/?fiddle=v7#fiddle/1h7c
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
store: {
autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
},
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody(),
listeners: {
afterrender: function(me) {
let store = me.getStore()
console.log("Event fired!")
store.each(record => {
console.log(record.get('name'))
})
}
},
});
You can easily do this by creating store afterrender of combo box and set store to combo box.
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody(),
listeners: {
afterrender: function(me) {
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
listeners: {
load: function(store) {
Ext.each(store.data.items,function(rec){
console.log(rec.data.name);
});
}
}
});
me.setStore(store);
}
},
});
I want to have a dynamic tree panel in my project. I use from sencha docs example For this component.
But, I have a error when run my project:
Ext.data.schema.Schema.lookupEntity(): No such Entity "Category".
MyProject/Model/Category.js:
Ext.define('MyProject.model.Category',{
extend: 'Ext.data.Model',
fields: ['id', {
name: 'name',
type: 'string'
}]
});
MyProject/classic/src/view/category/Cateogry.js:
Ext.define('MyProject.view.category.Category', function(){
var store = Ext.create('Ext.data.TreeStore', {
model: 'Category',
root: {
name: 'Product'
}
});
var items = [{
items:[{
xtype: 'textfield',
fieldLabel: 'Name'
},{
xtype: 'treepanel',
reference: 'treepanel',
height: 200,
width: 400,
frame: true,
store: store,
rootVisible: false
},{
xtype: 'button',
text: 'Add',
listeners: {
click: 'onClick'
}
}]
}];
return{
extend: 'Ext.panel.Panel',
requires: [
'Ext.form.Panel',
'Ext.rtl.*'
],
controller: 'categorycontroller',
alias: 'widget.category',
layout: 'vbox',
items: items
};
});
You have to add your model as required:
...
requires: [
'Ext.form.Panel',
'Ext.rtl.*',
'ProjectName.model.Category'
],
...