Related
I am having an error when I use an example from the Sencha Docs website. The example is a grid which you can find here
So I tried to copy all the code, but for some reason it does not work for me.
app.js
const test = Ext.define('KitchenSink.view.grid.CellEditing', {
extend: 'Ext.grid.Panel',
requires: [
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'KitchenSink.model.grid.Plant'
],
xtype: 'cell-editing',
title: 'Edit Plants',
frame: true,
initComponent: function() {
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
width: 680,
height: 350,
plugins: [this.cellEditing],
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: KitchenSink.model.grid.Plant,
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'resources/data/grid/plants.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}]
}),
columns: [{
header: 'Common Name',
dataIndex: 'common',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
]
})
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: Ext.util.Format.dateRenderer('M d, Y'),
editor: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
}
}, {
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor',
width: 90,
stopSelection: false
}, {
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'resources/images/icons/fam/delete.gif',
tooltip: 'Delete Plant',
scope: this,
handler: this.onRemoveClick
}]
}],
selModel: {
selType: 'cellmodel'
},
tbar: [{
text: 'Add Plant',
scope: this,
handler: this.onAddClick
}]
});
this.callParent();
this.on('afterlayout', this.loadStore, this, {
delay: 1,
single: true
})
},
loadStore: function() {
this.getStore().load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: this.onStoreLoad
});
},
onStoreLoad: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
},
onAddClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
common: 'New Plant 1',
light: 'Mostly Shady',
price: 0,
availDate: Ext.Date.clearTime(new Date()),
indoor: false
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
},
onRemoveClick: function(grid, rowIndex){
this.getStore().removeAt(rowIndex);
}
})
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [{
items: test
}]
})
}
})
index.html:
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <link rel='shortcut icon' href='./imatges/icones/petits/login.png' type='image/png'> -->
<title>Sencha</title>
<!-- CDN 4.2.1- NEPTUNE -->
<link href="http://cdn.sencha.io/ext/gpl/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
<link href="http://cdn.sencha.io/ext/gpl/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<!-- JScript -->
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
I keep getting this error when I open it on the browser:
Why is it not working and how to solve this?
Thanks
You're defining the CellEditing and model.grid.Plant with the app name of KitchenSink:
const test = Ext.define('KitchenSink.view.grid.CellEditing',{
//rest of your code
requires: [
//other requires
'KitchenSink.model.grid.Plant'
]
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: KitchenSink.model.grid.Plant,
//rest of store
onAddClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
//rest of model configs
But in the Ext.application, you define the name of the application as "MyApp":
Ext.application({
name: 'MyApp',
//other configs
Change the name of the application to KitchenSink or define the CellEditing, the requires and the models like:
const test = Ext.define('MyApp.view.grid.CellEditing',{
//rest of your code
And see if it works.
I am new in ExtJS and I am trying to display combobox inside panel but while adding below code inputbox is coming for Combo item.
here is the code
{
xtype: 'combobox',
fieldLabel: 'Rating',
name: 'rating',
store: [['1', '4']],
id: 'test',
forceSelection: false,
editable: true,
typeAhead: true,
selectOnFocus: true
},
Thanks for your answer but still its not working i am not sure where is the mistake.
Please help i have already wasted my one day for this
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ext-all.css" />
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/ext-base.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/ext-all.js"></script>
<title>Insert title here</title>
<head>
<title>Search Box Example 1</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- CSS styles for standard search box -->
</head>
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing#extjs.com
* http://www.extjs.com/license
*/
// some data used in the examples
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing#extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
var fs = new Ext.FormPanel({
frame: true,
title:'XML Form',
labelAlign: 'right',
labelWidth: 85,
width:340,
waitMsgTarget: true,
// configure how to read the XML Data
// reusable eror reader class defined at the end of this file
items: [
new Ext.form.FieldSet({
title: 'Contact Information',
autoHeight: true,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
width:190
}, {
fieldLabel: 'Last Name',
name: 'last',
width:190
}, {
fieldLabel: 'Company',
name: 'company',
width:190
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:190
},
new Ext.form.ComboBox({
fieldLabel: 'State',
hiddenName:'state',
store: ['1', '4'],
valueField:'abbr',
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
width:190
}),
new Ext.form.DateField({
fieldLabel: 'Date of Birth',
name: 'dob',
width:190,
allowBlank:false
})
]
})
]
});
// simple button add
// explicit add
fs.render('form-ct');
fs.on({
actioncomplete: function(form, action){
if(action.type == 'load'){
submit.enable();
}
}
});
});
</script>
<div id="form-ct"></div>
</body>
</html>
You're store array of data is double nested, instead it should be ['1','4']. So only the one option was showing. I made a fiddle to demonstrate the combobox working.
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);
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>
<html>
<head>
<title>Testing Window</title>
<script type="text/javascript" src="http://www.extjs.com/deploy/ext-3.1.1-rc/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/ext-3.1.1-rc/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/ext-3.1.1-rc/resources/css/ext-all.css" />
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing#extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.override( Ext.data.Store, {
findExact: function( fld, val ) {
var hit = null;
this.each( function(rec) { if( rec.get(fld) == val ) { hit = rec; return false; }; } );
return hit;
}
});
var listAdded = 0;
var addListBtn = {
text: 'Add',
handler: function() {
Ext.getCmp('tab_list').add(getList());
Ext.getCmp('tab_list').doLayout();
}
}
var testData = new Ext.data.SimpleStore({
fields: ['no', 'name', 'address','phone','businessPhone'],
data: [['68', 'Target','123 Valley Road','(345) 908-9087','(345) 908-9087'],
['69', 'Walmart','456 Main Road','(345) 908-9999','(345) 908-9990']]
});
var getList = function() {
listAdded++;
var items = new Ext.form.FieldSet(
{
id:listAdded,
title: listAdded,
collapsible: true,
layout: 'form',
autoHeight: true,
defaults: {width: 300},
defaultType: 'textfield',
bodyStyle: 'padding:5px',
labelWidth: 225,
items: [
{
xtype: 'combo',
fieldLabel: 'Customer No',
name: 'changescustomerNo',
hiddenName: 'changescustomerNo',
store: new Ext.data.SimpleStore({
fields: ['id','value'],
data: [['68','Test1'],['69','Test2']]
}),
displayField: 'value',
valueField: 'id',
selectOnFocus: true,
mode: 'local',
editable: false,
triggerAction: 'all',
value: ' ',
listeners:{select:{ fn:function(combo, value) {
var m = testData.findExact( 'no', this.value );
if(m) {
//alert(this.id);
Ext.getCmp('currentName').setValue(m.get('name'));
Ext.getCmp('currentAddress').setValue(m.get('address'));
Ext.getCmp('currentTelephoneNumber').setValue(m.get('phone'));
Ext.getCmp('currentBusTelephoneNumber').setValue(m.get('businessPhone'));
}
}//function
}//select
}//listeners
},{
id: 'currentName',
fieldLabel: 'Current Name',
name: 'currentName',
value: ''
},{
id: 'currentAddress',
width: 298,
xtype: 'textarea',
fieldLabel: 'Current Address',
name: 'currentAddress',
value: ''
},{
id:'currentTelephoneNumber',
fieldLabel: 'Current Telephone Number',
name: 'currentTelephoneNumber',
value: ''
},{
id: 'currentBusTelephoneNumber',
fieldLabel: 'Current Business Telephone Number',
name: 'currentBusTelephoneNumber',
value: ''
}
]
}
);
return items;
}
var pnlMain = new Ext.Panel({
id: 'theForm',
title: 'Sample List',
bodyStyle:'padding:5px',
autoWidth: true,
frame: true,
items: [{
xtype: 'tabpanel',
id: 'tabpanel',
activeTab: 0,
height: 540,
width: '100%',
resizeTabs: true,
tabWidth: 125,
minTabWidth: 125,
layoutOnTabChange: true,
deferredRender: false, // Create all form elements on load
defaults: {
bodyStyle: 'padding:10px',
autoScroll: true,
layout: 'form',
defaultType: 'textfield',
labelWidth: 160
},
items:[{
id: 'tab_list',
title: 'List',
items: getList(),
buttons: [
addListBtn
]
}]
}]
});
pnlMain.render('main');
});
</script>
<div id="main"></div>
</body>
</html>
you you give more details to what you're actually trying to do perhaps someone can help, specifically:
do you actually mean fieldset, rather than field
what is the general idea you're trying to accomplish ( when user clicks in fieldset x happens)