I have a combo box which displays item quantity. Based on item quantity selection i am displaying price value of the item. By default i am setting price value to first item value. However when i load the page, i want my combo box to display first item qty i.e 100.
Problem: it should load Qty : 100 rather loading blank
So i have a store defined as
Store = new Ext.data.JsonStore({
storeId: 'Store',
root: 'storevalue',
autoLoad: false,
baseParams: { itemid: '${itemID!""}',
adjustPrice: '${adjustPrice}',
overrideShowPrice: '${overrideShowPrice}' },
url: 'ListQtyPrice.epm',
fields: [ 'qty', 'rawprice', 'displayPrice' ]
});
Combo box to display Qty
<#if Select>
new DBEComboBox({
name: 'orderqty',
displayField: 'qty',
valueField: 'qty',
id: 'order-qty',
store: Store,
forceSelection: true,
mode: 'remote',
triggerAction: 'all',
allowBlank: true,
listWidth: 202,
triggerClass: 'orderqty-trigger',
width: 200
,defaultValue: 100
,listeners: {
// for price adjustments
}
});
</#if>
Store.load({
callback: function() {
alert("reached");
Ext.getCmp('order-qty').setValue(Store.getAt(0).get('qty'));
var oqc = Ext.getCmp('order-qty');
var value = Ext.getCmp('order-qty').getValue();
alert(" hey :" +value);
}
});
Able to see hey: 100 in alert statements
I've run into this problem a couple times. The only way I've actually gotten this resolved was to call setValue on the combobox after the store has loaded, you could just add a listener on the store, but that always seemed somewhat messy to me. I usually have a stand-alone event listener like this:
Store.on('load',function(store) {
Ext.getCmp('order-qty').setValue(store.getAt('0').get('qty'));
});
EDIT: 18 Jan 2012
OK as mentioned here is a complete working example of ComboBox with a default value being set. This is done using ExtJS 4.02, should work fine with 4.07 though, not sure about 4.1.
Make sure you put your correct extjs path in the links (see brackets at the top of html), otherwise just put both combo-example and data.json at the same directory level and they should run fine:
data.json:
[
{"value":1,"name":"Option 1"},
{"value":2,"name":"Option 2"},
{"value":3,"name":"Option 3"}
]
combo-example.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Combo Box Example</title>
<link rel="stylesheet" type="text/css" href="[your extjs path]/resources/css/ext-all.css">
<script type="text/javascript" src="[your extjs path]/ext-all.js"></script>
<script type="text/javascript" >
Ext.onReady(function() {
// the datastore
var myStore = new Ext.data.Store({
fields: ['value', 'name'],
proxy: {
type: 'ajax',
url : 'data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
// a window to hold the combobox inside of a form
myWindow = Ext.create('Ext.Window', {
title: 'A Simple Window',
width: 300,
constrain: true,
modal: true,
layout: 'fit',
items: [{
// the form to hold the combobox
xtype: 'form',
border: false,
fieldDefaults: {
labelWidth: 75
},
bodyPadding: '15 10 10 10',
items: [{
// the combobox
xtype: 'combo',
id: 'myCombo',
fieldLabel: 'A Label',
valueField: 'value',
displayField: 'name',
store: myStore,
//queryMode: 'local',
typeAhead: true,
forceSelection: true,
allowBlank: false,
anchor: '100%'
},{
// shows the selected value when pressed
xtype: 'button',
margin: '10 0 0 100',
text: 'OK',
handler: function() {
alert('Name: ' + Ext.getCmp('myCombo').getRawValue() +
'\nValue: ' + Ext.getCmp('myCombo').value);
}
}]
}]
});
// show the window
myWindow.show();
// function to give the combobox a default value
myStore.on('load',function(store) {
Ext.getCmp('myCombo').setValue(store.getAt('0').get('value'));
});
});
</script>
</head>
<body>
</body>
</html>
Related
I'm getting a blank screen and not able to find error when I executed this html code in browser, tried every possible alternate codes available online, should I define something before Ext.create()? Please help.
<html>
<head>
<title>Combo Box</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href =
"https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-
classic/resources/theme-classic-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js">
</script>
<script type="text/javascript">
Ext.onReady(function() { Ext.create({ //creating combobox
fullscreen: true,
xtype: 'container',
padding: 50,
layout: 'vbox',
items: [{
xtype: 'combobox', //set type to combobox
label: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
store: [
{ abbr: 'AL', name: 'Alabama' }, //list values in combobox
{ abbr: 'AK', name: 'Alaska' },
{ abbr: 'AZ', name: 'Arizona' }
]
}]
});
});
</script>
<body>
</body>
</html>
You are missing renderTo property.
Example:
Ext.onReady(function () {
Ext.create({ //creating combobox
fullscreen: true,
xtype: 'container',
padding: 50,
layout: 'vbox',
renderTo: Ext.getBody(),
items: [{
xtype: 'combobox', //set type to combobox
fieldLabel: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
store: Ext.create('Ext.data.Store', {
data: [{
abbr: 'AL',
name: 'Alabama'
}, //list values in combobox
{
abbr: 'AK',
name: 'Alaska'
}, {
abbr: 'AZ',
name: 'Arizona'
}
]
})
}]
});
});
Additionally, store config is also corrected in example.
Working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2atl
I have a piece of code which makes a combobox active when a checkbox is checked. Once the checkbox is checked I can select a value from the combobox. But I want the combobox to return having no value (blank) once the checkbox is unchecked. How do i do that?
My code is as follows:
var tests = [
['Test1'],
['Test3'],
['Test2']
];
Ext.define('Test', {
extend: 'Ext.data.Model',
fields: ['test']
});
var testsStore = new Ext.data.Store({
model: 'Test',
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: tests
});
var form = Ext.create('Ext.form.Panel', {
renderTo: document.body,
bodyPadding: 10,
width: 550,
style: 'margin:16px',
height: 300,
title: 'Testing example',
items: [{
xtype: 'checkboxfield',
name: 'system',
boxLabel: 'Production (PACTV)',
inputValue: 'production',
listeners: {
change: function (checkbox, newValue, oldValue, eOpts) {
var combo = checkbox.up('form').down('combobox');
if (newValue) {
Ext.getCmp('secondComboID').setReadOnly(false);
Ext.getCmp('secondComboID').allowBlank = false;
Ext.getCmp('secondComboID').validate();
} else {
Ext.getCmp('secondComboID').setReadOnly(true);
Ext.getCmp('secondComboID').allowBlank = true;
Ext.getCmp('secondComboID').validate();
}
}
}
}, {
xtype: 'combobox',
fieldLabel: 'Select Test',
readOnly: true,
id: 'secondComboID',
store: testsStore,
valueField: 'id',
displayField: 'test',
typeAhead: true,
forceSelection: true,
editable: true,
triggerAction: 'all',
lastQuery: ''
}]
});
Here is a working fiddle : https://fiddle.sencha.com/#view/editor&fiddle/1u9n
Use this in your fiddle when you uncheck the checkbox:
Ext.getCmp('secondComboID').reset();
Use this code to remove the datas from the combo or to load empty array data in the combo
Ext.getCmp('secondComboID').getStore().loadRawData([]);
Also if You wish to load the previous datas again here is an example of it which allows us to toggle to load the datas and to remove datas from combo
Try the FIDDLE
Good day!
Need help ExtJS 4.1
There is a ComboBox. There is a Grid. Grid plugged plug rowexpander.
ComboBox and Grid take data from one array.
The purpose of the script: after selecting an item in the ComboBox - open the corresponding rowexpander in the grid.
That is, The user selects in ComboBox «Alcoa Inc» and in the field of Grid row with the name of the company «Alcoa Inc» rowexplander is disclosed.
Problem: I can not turn to the records in the table and call the event expandbody / collapsebody
After selecting a ComboBox'e I get the id of the selected item, which corresponds to the id record in Grid, but also how to use it, what would appeal - I can not understand.
grid.getView (). getNode (0) - got so appeal, but it's not something that would help me.
PS So far, the variables are declared as window.grid and window.simpleCombo to simplify debugging
The script:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../examples/ux');
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.util.*',
'Ext.ux.RowExpander',
'Ext.selection.CheckboxModel',
'Ext.tip.QuickTipManager',
'Ext.ux.data.PagingMemoryProxy',
'Ext.toolbar.Paging',
'Ext.ux.SlidingPager',
'Ext.form.field.ComboBox',
'Ext.form.FieldSet'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var myData = [
['0','3m Co',71.72,'9/1 12:00am'],
['1','Alcoa Inc',29.01,'9/1 12:00am'],
['2','Altria Group Inc',83.81,'9/1 12:00am'],
['3','American Express Company',52.55,'9/1 12:00am'],
['4','American International Group, Inc.',64.13,'9/1 12:00am'],
['5','AT&T Inc.',31.61,'9/1 12:00am'],
['6','Boeing Co.',75.43,'9/1 12:00am'],
['7','Caterpillar Inc.',67.27,'9/1 12:00am'],
['8','Citigroup, Inc.',49.37,'9/1 12:00am']
];
Ext.define('Company', {
extend: 'Ext.data.Model',
idProperty: 'company',
fields: [
{name: 'id', type: 'int'},
{name: 'company', type: 'string'},
{name: 'price', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{type: 'int', name: 'id'},
{type: 'string', name: 'name'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Company',
remoteSort: true,
pageSize: 3,
proxy: {
type: 'pagingmemory',
data: myData,
reader: {
type: 'array'
}
}
});
// create the data store for combobox
function createStore() {
return Ext.create('Ext.data.Store', {
autoDestroy: true,
model: 'State',
data: myData
});
}
// create the Grid
window.grid = Ext.createWidget('gridpanel', {
title:'Sliding Pager',
store: store,
columns: [ {
id:'company',
text: 'Company',
sortable: true,
dataIndex: 'company',
flex: 1
},{
text: 'Price',
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'price',
width: 75
},{
text: 'Last Updated',
sortable: true,
dataIndex: 'lastChange',
width: 75
}],
stripeRows: true,
height:320,
minHeight: 160,
width:700,
frame:true, //+
plugins: [{
ptype: 'rowexpander',
id: 'atata',
rowBodyTpl : [
'<p>Company: <b>{company}</b></p>',
'<p><b>$ {price}</b></p>'
]
}],
collapsible: true,
animCollapse: false, // end +
resizable: {
handles: 's'
},
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 3,
store: store,
displayInfo: true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
})
});
grid.render('grid-example');
function open_some_plus(val) {
alert(grid.getView().getNode(val));
}
// Simple ComboBox using the data store
window.simpleCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select a single state',
renderTo: 'simpleCombo',
displayField: 'name',
width: 700,
labelWidth: 400,
store: createStore(),
queryMode: 'local',
typeAhead: true
});
simpleCombo.on('select', function() {
var v = simpleCombo.getValue();
var record = simpleCombo.findRecord(simpleCombo.valueField || simpleCombo.displayField, v);
var index = simpleCombo.store.indexOf(record);
open_some_plus(index);
});
store.load();
});
Html code:
<!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>Sliding Pager Extension Example</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="shared/example.css" />
<style type="text/css">
body .x-panel {
margin-bottom:20px;
}
.icon-grid {
background-image:url(../shared/icons/fam/grid.png) !important;
}
.add {
background-image:url(../shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(../shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(../shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(../shared/icons/save.gif) !important;
}
</style>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="app2.js"></script>
</head>
<body>
<div id="simpleCombo"></div>
<div id="mydiv_id"></div>
<br/>
<div id="grid-example"></div>
</body>
</html>
Tell me the solution, the second day of the "struggling against the wall."
[opt] specify pluginId instead of id
use getPlugin() or grid.plugins[0] and "native" .toggleRow()
plugins: [{
ptype: 'rowexpander',
pluginId: 'atata',
rowBodyTpl : [
'<p>Company: <b>{company}</b></p>',
'<p><b>$ {price}</b></p>'
]
}],
function open_some_plus(val) {
grid.getPlugin('atata').toggleRow(val)
}
This code works:
//val = 5 for example
var store = grid.getStore();
var expander = grid.plugins[0];
var page = grid.store.currentPage;
var record = store.getAt(val);
expander.toggleRow(val);
Using the example in "ext-designer-for-ext-js-4-users-guide.pdf" i've put together the following. The issue is that the store is not binding. ie the select is empty.
MyComboBox.js
Ext.define('MyApp.view.MyComboBox', {
extend: 'MyApp.view.ui.MyComboBox',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
Ext.define('MyApp.view.ui.MyComboBox', {
extend: 'Ext.form.field.ComboBox',
fieldLabel: 'comboList',
displayField: 'comboList',
queryMode: 'local',
store: 'MyArrayStore',
triggerAction: 'all',
valueField: 'comboList',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
store/MyArrayStore.js
Ext.define('MyApp.store.MyArrayStore', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyArrayStore',
data: [
[
'Search Engine'
],
[
'Online Ad'
],
[
'Facebook'
]
],
proxy: {
type: 'ajax',
reader: {
type: 'array'
}
},
fields: [
{
name: 'comboList'
}
]
}, cfg)]);
}
});
** update **
this was driving me crazy. It's [turns out][1] my array need to be json format. When i updated it to
[{"comboList" : "Hello"}, {"comboList" : "Hi"}, {"comboList" : "GoodMorning"}]
it worked.
I started to try and pick apart your implementation but it seems somewhat convoluted, starting with the store where there is local data and a proxy defined but no url for the proxy.
It seemed easier to just give you a simplified implementation of a combobox (using local data because it seems that is what you are trying to do):
// the datastore
var myStore = Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data: [
{value: 1, name: 'Search Engine'},
{value: 2, name: 'Online Ad'},
{value: 3, name: 'Facebook'}
]
});
// a window to hold the combobox inside of a form
myWindow = Ext.create('Ext.Window', {
title: 'A Simple Window',
width: 300,
constrain: true,
modal: true,
layout: 'fit',
items: [{
// the form to hold the combobox
xtype: 'form',
border: false,
fieldDefaults: {
labelWidth: 75
},
bodyPadding: '15 10 10 10',
items: [{
// the combobox
xtype: 'combo',
id: 'myCombo',
fieldLabel: 'Title',
valueField: 'value',
displayField: 'name',
store: myStore,
queryMode: 'local',
typeAhead: true,
forceSelection: true,
allowBlank: false,
anchor: '100%'
},{
// shows the selected value when pressed
xtype: 'button',
margin: '10 0 0 100',
text: 'OK',
handler: function() {
alert('Name: ' + Ext.getCmp('myCombo').getRawValue() +
'\nValue: ' + Ext.getCmp('myCombo').value);
}
}]
}]
});
// show the window
myWindow.show();
This creates a combobox inside of a little window with an OK button. When you press OK it will alert the visible text of the combobox Ext.getCmp('myCombo').getRawValue() and the value of the item in the combobox Ext.getCmp('myCombo').value.
If you drop this in your project you can get an idea of how it implements, it should just run.
If you actually wanted a remote datastore (from a webservice that returns json for example) you would just need to change the datastore configuration like so:
var myRemoteStore = Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
proxy: {
type: 'ajax',
url: 'myWebservice.php', // whatever your webservice path is
reader: 'json',
},
autoLoad:true
});
Let me preface this by saying that I've been working with ExtJS for all of a week and half, so please pardon the noobishness.
I'm building a form inside of a tab panel, and I was testing different ways to lay out two comboboxes side by side instead of stacked on top of each other. My first attempt was with a fieldset, but I abandoned that for a container with a column layout.
Which led me to the following code:
Ext.onReady( function() {
var tabs = new Ext.TabPanel({
renderTo: 'myForm',
activeTab: 0,
autoHeight: true,
header: true,
title: "Test Title",
border: false,
defaults: {
height: 256,
tabCls: 'order-tab'
},
items: [
{
title: 'Tab 1',
contentEl: 'tab1',
}
]
});
// Account Dropdown
var accountField = new Ext.form.ComboBox({
fieldLabel: 'Account',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'accountId',
'displayText'
],
data: [[1, 'Account 1'], [2, 'Account 2']]
}),
displayField: 'displayText',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select an account',
selectOnFocus:true,
boxMaxWidth: 170
});
//Type dropdown
var accountTypeField = new Ext.form.ComboBox({
fieldLabel: 'Type',
store: new Ext.data.ArrayStore({
id: 1,
fields: [
'accountTypeId',
'displayText'
],
data: [[0, 'Type1'], [1, 'Type2']]
}),
displayField: 'displayText',
typeAhead: false,
editable: false,
mode: 'local',
triggerAction: 'all',
value: 'Type1',
selectOnFocus:true,
boxMaxWidth: 109
});
//Account info fieldset (account dropdown + type dropdown)
var accountInfo = new Ext.form.FieldSet({
defaults: {
anchor: '-20'
},
items :[
accountTypeField
]
});
//Account info (account dropdown + type dropdown)
var accountInfoGroup = new Ext.Container({
autoEl: 'div',
layout: 'column',
cls: 'account-info',
defaults: {
xtype: 'container',
autoEl: 'div',
columnWidth: 1,
anchor: '-20',
},
"items":[
{
"layout":"column",
"items":[
{
"columnWidth":0.6,
"layout":"form",
"labelWidth": 50,
"items":[
accountField
]
},
{
"columnWidth":0.4,
"layout":"form",
"labelWidth": 30,
"anchor":-20,
"items":[
accountTypeField
]
}
]
}
]
});
this.form= new Ext.FormPanel({
applyTo: 'tab1',
border:false,
defaults:{xtype:'textfield'},
items:[
accountInfoGroup,
]
});
});
This looked the way I wanted it to, so I started going back to clean up the unused fieldset code.
Which brings me to the goofy part. When I strip out this section:
//Account info fieldset (account dropdown + type dropdown)
var accountInfo = new Ext.form.FieldSet({
defaults: {
anchor: '-20'
},
items :[
accountTypeField
]
});
...the maxBoxWidth declaration on accountTypeField suddenly gets ignored and the layout goes all wonky. Just to be clear, there was more code in the fieldset snippet originally, but I could take all of it out and have the maxBoxWidth work fine UNTIL I tried to take out those two remaining pieces (defaults > anchor and items > accountTypeField).
So my question is, what is going on? Why does removing that fieldset affect the width of the combobox when it's not even being used? Is it a config issue?
I'm stumped and frustrated and looking for any help!
You are mixing properties for objects that you're not using... Try removing all the anchor properties. These only apply when you're using an anchor layout as your container. I would remove any absolute height and widths that you're setting for widgets and layouts. You can't mix columnWidth and width for instance when you're using a column layout. It's best to stay as consistent as possible with how you're handling widths for column and table layouts...
also: Use Ext.Panel instead of Container
//Account info (account dropdown + type dropdown)
var accountInfoGroup = new Ext.Panel({
autoEl: 'div',