I'm using extjs and I want to customize the first row texts in a table to bold and increase the font size. I didnt find any unique property for rows. Is there any way to customize?
Solution:
You may try to use viewConfig config option of Ext.grid.Panel and Ext.tree.Panel. Below are working examples.
Working example (Grid Panel):
Data: customgrid.json
[
{Id : '1', Name: 'Name 1'},
{Id : '2', Name: 'Name 2'},
{Id : '3', Name: 'Name 3'},
{Id : '4', Name: 'Name 4'},
{Id : '5', Name: 'Name 5'},
{Id : '6', Name: 'Name 6'}
]
CSS: customgrid.css
.grid-firstrow .x-grid-cell {
font-weight: bold;
font-size: 18;
}
Grid: customgrid.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./customgrid.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.define('testmodel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Id', type: 'string'},
{name: 'Name', type: 'string'}
]
});
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
loadTestData: function() {
var me = this;
me.store.load();
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = new Ext.data.Store({
autoLoad: false,
proxy: {
url: 'customgrid.json',
type: 'ajax',
reader: {type: 'json'},
writer: {type: 'json'}
},
model: 'testmodel'
});
me.grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
stripeRows: true,
width: 420,
height: 200,
store: me.store,
columnLines: false,
columns : [
{header : 'Id', sortable : true, width : 50, dataIndex : 'Id'},
{header : 'Name', sortable : true, width : 100, dataIndex : 'Name'}
],
viewConfig: {
getRowClass: function(record, index) {
var css = '';
if (index == 0) {
css = 'grid-firstrow';
} else {
css = '';
}
return css;
}
}
});
me.add(me.grid);
me.loadTestData();
}
});
var win = new Test.Window({
});
win.show();
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
Working example (Tree Panel):
CSS: customtree.css
.tree-node .x-grid-cell-inner {
font-weight: bold;
font-size: 18px;
}
Tree: customtree.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./customtree.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = new Ext.data.TreeStore({
proxy: {
type: 'memory',
reader: {
type: 'json'
}
},
model: 'usersw_model'
});
me.tree = new Ext.tree.Panel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: false,
width: '100%',
flex: 1,
border: false,
rootVisible: false,
allowChildren: true,
store: me.store,
root: {
expanded: true,
text: 'Ext JS',
draggable: false,
id: 'root'
},
viewConfig: {
getRowClass: function(record, index) {
var css = '';
if (index == 0) {
css = 'tree-node';
} else {
css = '';
}
return css;
}
}
});
me.add(me.tree);
var rootnode = me.tree.getRootNode();
var parent1node = rootnode.appendChild({
text: 'Parent1',
leaf: false
});
parent1node.appendChild({
text: 'Child1',
leaf: true
});
parent1node.appendChild({
text: 'Child2',
leaf: true
});
parent1node.appendChild({
text: 'Child3',
leaf: true
});
var parent2node = rootnode.appendChild({
text: 'Parent2',
leaf: false
});
parent2node.appendChild({
text: 'Child1',
leaf: true
});
parent2node.appendChild({
text: 'Child2',
leaf: true
});
parent2node.appendChild({
text: 'Child3',
leaf: true
});
var parent3node = rootnode.appendChild({
text: 'Parent3',
leaf: false
});
}
});
var win = new Test.Window({
});
win.show();
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
You'd use CSS for that:
tr:first-child {
font-weight: bold;
font-size: x-large;
}
or output the first row cells as th instead of td and style it this way:
th {
font-weight: bold;
font-size: x-large;
}
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.
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 am trying to find out the events listeners in ExtJs on Charts tooltips.
I have column chart and by default, it has tooltip with the respective values.
I have to display those tooltip values in alert box when i'll click on bars or columns of the chart.
Thanks!!
here is the javascript code for Area chart:
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.onReady(function () {
var chart = Ext.create('Ext.chart.Chart', {
id: 'chartCmp',
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store1,
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
title: 'Number of Hits',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
style: {
opacity: 0.93
}
}]
});
var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
shadow: false,
maximizable: true,
title: 'Area Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}, {
enableToggle: true,
pressed: true,
text: 'Animate',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
}
}],
items: chart
});
});
and this is the html code:
<html>
<head>
<title>Area Chart Example</title>
<link rel="stylesheet" type="text/css" href="../../css/ext-all.css">
<script type="text/javascript" src="../../js/ext-debug.js"></script>
<script type="text/javascript" src="../../js/ext-all.js"></script>
<script type="text/javascript" src="../../js/example-data.js"></script>
<script type="text/javascript" src="areachart.js"></script>
</head>
<body>
</body>
</html>
When u'll run this code, u'll have area chart and tooltip having values by default but my requirement is when i'll click on the chart then the value should be displayed in alert box which is displaying in tooltip currently....
I have following code i want that window opened uses Ext.layout.BorderLayout and also on the left side of the window has Ext.tree.TreePanel... I tried it but when I use BorderLayout the page does not open? Can anyone help me with this?
Ext.onReady(function() {
var window = Ext.create('Ext.Window', {
title: 'Hello',
height: 100,
width: 100
});
window.show();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>
Some addition to bmoeskau's answer. I recomend you to not use JavaScript reserved words like window, document, number etc.
Here's an official example showing a window with a BorderLayout. It's not enough just to add layout:'border' you have to add panels to the layout container and also configure the layout regions properly.
E.g.:
var window = Ext.create('Ext.Window', {
title: 'Hello',
width: 100,
height: 100,
layout: 'border',
items: [{
region: 'west',
title: 'Sidebar',
width: 200,
split: true,
collapsible: true,
floatable: false
}, {
region: 'center',
html: 'Some content'
}]
});
Simply give your window a border layout and set the regions for the immediate children. Each child will have its own layout and child items.
Ext.onReady(function() {
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "Wake up",
leaf: true
}, {
text: "Go to Work",
expanded: true,
children: [{
text: "Eat Lunch",
leaf: true
}, {
text: "Finish Report",
leaf: true
}]
}, {
text: "Go to Sleep",
leaf: true
}]
}
});
var myWindow = Ext.create('Ext.Window', {
title: 'Hello World',
width: 480,
height: 220,
layout: 'border',
items: [{
layout: 'fit',
region: 'west',
title: 'Tasks',
width: 180,
split: true,
collapsible: true,
floatable: false,
items: [{
xtype: 'treepanel',
store: treeStore,
rootVisible: false,
}]
}, {
layout: 'fit',
region: 'center',
items: [{
xtype: 'textarea',
value: new Lorem().createText(6, Lorem.TYPE.SENTENCE),
flex: 1
}]
}]
});
myWindow.show();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>
<script src="https://cdn.rawgit.com/f/loremjs/master/lorem.js"></script>
<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)