本文目录一览：
- 1、extjs xtype有哪些样式
- 2、extjs里如何调整columns里的列宽
- 3、EXTJS3.0如何画柱状图
- 4、怎么用ExtJs 的chart做出这样的奖金池变化图：
- 5、Extjs中做Chart柱状图统计时怎么限制柱子的最大宽度？
- 6、Extjs GridPanel构造器参数意思
extjs xtype有哪些样式
基本组件：
xtype Class 描述
button Ext.Button 按钮
splitbutton Ext.SplitButton 带下拉菜单的按钮
cycle Ext.CycleButton 带下拉选项菜单的按钮
buttongroup Ext.ButtonGroup 编组按钮(Since 3.0)
slider Ext.Slider 滑动条
progress Ext.ProgressBar 进度条
statusbar Ext.StatusBar 状态条，2.2加进来，3.0 又去了
colorpalette Ext.ColorPalette 调色板
datepicker Ext.DatePicker 日期选择面板
容器及数据类组件
xtype Class 描述
window Ext.Window 窗口
viewport Ext.ViewPort 视口，即浏览器的视口，能随之伸缩
box Ext.BoxComponent 盒子组件，相当于一个 div
component Ext.Component 组件
container Ext.Container 容器
panel Ext.Panel 面板
tabpanel Ext.TabPanel 选项面板
treepanel Ext.tree.TreePanel 树型面板
flash Ext.FlashComponent 显示 Flash 的组件(Since 3.0)
grid Ext.grid.GridPanel 表格
editorgrid Ext.grid.EditorGridPanel 可编辑的表格
propertygrid Ext.grid.PropertyGrid 属性表格
editor Ext.Editor 编辑器
dataview Ext.DataView 数据显示视图
listview Ext.ListView 列表视图
工具栏组件：
xtype Class 描述
paging Ext.PagingToolbar 分页工具条
toolbar Ext.Toolbar 工具栏
tbbutton Ext.Toolbar.Button 工具栏按钮
tbfill Ext.Toolbar.Fill 工具栏填充区
tbitem Ext.Toolbar.Item 工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacer Ext.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext Ext.Toolbar.TextItem 工具栏文本项
菜单组件：
xtype Class 描述
menu Ext.menu.Menu 菜单
colormenu Ext.menu.ColorMenu 颜色选择菜单
datemenu Ext.menu.DateMenu 日期选择菜单
menubaseitem BaseItem
menucheckitem Ext.menu.CheckItem 选项菜单项
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator 菜单分隔线
menutextitem Ext.menu.TextItem 文本菜单项
表单及表单域组件：
xtype Class 描述
form Ext.FormPanel/Ext.form.FormPanel 表单面板
checkbox Ext.form.Checkbox 多选框
combo Ext.form.ComboBox 下拉框
datefield Ext.form.DateField 日期选择项
timefield Ext.form.TimeField 时间录入项
field Ext.form.Field 表单字段
fieldset Ext.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor HTML 编辑器
label Ext.form.Label 标签
numberfield Ext.form.NumberField 数字编辑器
radio Ext.form.Radio 单选按钮
textarea Ext.form.TextArea 多行文本框
textfield Ext.form.TextField 表单文本框
trigger Ext.form.TriggerField 触发录入项
checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2)
displayfield Ext.form.DisplayField 仅显示，不校验/不被提交的文本框
radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2)
图表组件：
xtype Class 描述
chart Ext.chart.Chart 图表组件
barchart Ext.chart.BarChart 柱状图
cartsianchart Ext.chart.CartesianChart
columnchart Ext.chart.ColumnChart
linechart Ext.chart.LineChart 连线图
piechart Ext.chart.PieChart 扇形图
数据集 Store：
xtype Class 描述
arraystore Ext.data.ArrayStore
directstore Ext.data.DirectStore
groupingstore Ext.data.GroupingStore
jsonstore Ext.data.JsonStore
simplestore Ext.data.SimpleStore
store Ext.data.Store
xmlstore Ext.data.XmlStore
以上参考；
请采纳，谢谢
extjs里如何调整columns里的列宽
其实不要想得太复杂，可以直接给column设置width属性来改变宽度。
如果要设置自适应列宽的话可以参考以下：
var grid = new Ext.grid.GridPanel({
title : '表格列自动分配宽度',
columns : [
{header : 'id',dataIndex:'id',width: 200},
{header :'name',dataIndex:'name'}
],
store : 数据源
});
EXTJS3.0如何画柱状图
用ext3.0实现的，我测试的整个文件如下
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleInsert title here/title
link rel="stylesheet" type="text/css"
href="../extjs/resources/css/ext-all.css" /
script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"/script
script type="text/javascript" src="../extjs/ext-all.js"/script
//以上的3个文件的引用很重要，要和你自己的相关路径对应。
script type="text/javascript"
Ext.chart.Chart.CHART_URL = '../extjs/resources/charts.swf ';//这个是要引用的图形
Ext.onReady (function(){
var store = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'Jul 07', visits: 245000, views: 3000000},
{name:'Aug 07', visits: 240000, views: 3500000},
{name:'Sep 07', visits: 355000, views: 4000000},
{name:'Oct 07', visits: 375000, views: 4200000},
{name:'Nov 07', visits: 490000, views: 4500000},
{name:'Dec 07', visits: 495000, views: 5800000},
{name:'Jan 08', visits: 520000, views: 6000000},
{name:'Feb 08', visits: 620000, views: 7500000}
]
});
var panel = new Ext.Panel({
title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
renderTo: 'container',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: store,
xField: 'name',
yField: 'visits',
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
}
}
});
new Ext.Panel({
iconCls:'chart',
title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',
frame:true,
renderTo: 'container',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: store,
url: '../extjs/resources/charts.swf',
xField: 'name',
yField: 'visits',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record){
return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
}
}
});
// more complex with a custom look
new Ext.Panel({
iconCls:'chart',
title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
frame:true,
renderTo: 'container',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'columnchart',
store: store,
url:'../extjs/resources/charts.swf',
xField: 'name',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){
if(series.yField == 'visits'){
return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
}else{
return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
}
},
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
},
series: [{
type: 'column',
displayName: 'Page Views',
yField: 'views',
style: {
image:'bar.gif',
mode: 'stretch',
color:0x99BBE8
}
},{
type:'line',
displayName: 'Visits',
yField: 'visits',
style: {
color: 0x15428B
}
}]
}
});
// panel.render('container');
});
/script
/head
body
div id="container"
/div
/body
/html
怎么用ExtJs 的chart做出这样的奖金池变化图：
这是标准的堆叠图
给你来个例子研究一下
Ext.define('ChartsKitchenSink.view.charts.column.Stacked', {
extend: 'Ext.Panel',
xtype: 'stacked-column',
initComponent: function() {
var me = this;
this.myDataStore = Ext.create('Ext.data.JsonStore', {
fields: ['month', 'data1', 'data2', 'data3', 'data4' ],
data: [
{ month: 'Jan', data1: 20, data2: 37, data3: 35, data4: 4 },
{ month: 'Feb', data1: 20, data2: 37, data3: 36, data4: 5 },
{ month: 'Mar', data1: 19, data2: 36, data3: 37, data4: 4 },
{ month: 'Apr', data1: 18, data2: 36, data3: 38, data4: 5 },
{ month: 'May', data1: 18, data2: 35, data3: 39, data4: 4 },
{ month: 'Jun', data1: 17, data2: 34, data3: 42, data4: 4 },
{ month: 'Jul', data1: 16, data2: 34, data3: 43, data4: 4 },
{ month: 'Aug', data1: 16, data2: 33, data3: 44, data4: 4 },
{ month: 'Sep', data1: 16, data2: 32, data3: 44, data4: 4 },
{ month: 'Oct', data1: 16, data2: 32, data3: 45, data4: 4 },
{ month: 'Nov', data1: 15, data2: 31, data3: 46, data4: 4 },
{ month: 'Dec', data1: 15, data2: 31, data3: 47, data4: 4 }
]
});
me.items = [{
xtype: 'chart',
width: '100%',
height: 410,
padding: '10 0 0 0',
animate: true,
shadow: false,
style: 'background: #fff;',
legend: {
position: 'bottom',
boxStrokeWidth: 0,
labelFont: '12px Helvetica'
},
store: this.myDataStore,
insetPadding: 40,
items: [{
type : 'text',
text : 'Column Charts - Stacked Columns',
font : '22px Helvetica',
width : 100,
height: 30,
x : 40, //the sprite x position
y : 12 //the sprite y position
}, {
type: 'text',
text: 'Data: Browser Stats 2012',
font: '10px Helvetica',
x: 12,
y: 380
}, {
type: 'text',
text: 'Source: ',
font: '10px Helvetica',
x: 12,
y: 390
}],
axes: [{
type: 'Numeric',
position: 'left',
grid: true,
fields: ['data1'],
label: {
renderer: function(v) { return v + '%'; }
},
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['month'],
label: {
rotate: {
degrees: -45
}
}
}],
series: [{
type: 'column',
axis: 'left',
title: [ 'IE', 'Firefox', 'Chrome', 'Safari' ],
xField: 'month',
yField: [ 'data1', 'data2', 'data3', 'data4' ],
stacked: true,
style: {
opacity: 0.80
},
highlight: {
fill: '#000',
'stroke-width': 1,
stroke: '#fff'
},
tips: {
trackMouse: true,
style: 'background: #FFF',
height: 20,
renderer: function(storeItem, item) {
var browser = item.series.title[Ext.Array.indexOf(item.series.yField, item.yField)];
this.setTitle(browser + ' for ' + storeItem.get('month') + ': ' + storeItem.get(item.yField) + '%');
}
}
}]
}];
this.callParent();
}
});
Code Preview
Ext.define('ChartsKitchenSink.view.charts.column.Stacked', {
extend: 'Ext.Panel',
xtype: 'stacked-column',
initComponent: function() {
var me = this;
this.myDataStore = Ext.create('Ext.data.JsonStore', {
fields: ['month', 'data1', 'data2', 'data3', 'data4' ],
data: [
{ month: 'Jan', data1: 20, data2: 37, data3: 35, data4: 4 },
{ month: 'Feb', data1: 20, data2: 37, data3: 36, data4: 5 },
{ month: 'Mar', data1: 19, data2: 36, data3: 37, data4: 4 },
{ month: 'Apr', data1: 18, data2: 36, data3: 38, data4: 5 },
{ month: 'May', data1: 18, data2: 35, data3: 39, data4: 4 },
{ month: 'Jun', data1: 17, data2: 34, data3: 42, data4: 4 },
{ month: 'Jul', data1: 16, data2: 34, data3: 43, data4: 4 },
{ month: 'Aug', data1: 16, data2: 33, data3: 44, data4: 4 },
{ month: 'Sep', data1: 16, data2: 32, data3: 44, data4: 4 },
{ month: 'Oct', data1: 16, data2: 32, data3: 45, data4: 4 },
{ month: 'Nov', data1: 15, data2: 31, data3: 46, data4: 4 },
{ month: 'Dec', data1: 15, data2: 31, data3: 47, data4: 4 }
]
});
me.items = [{
xtype: 'chart',
width: '100%',
height: 410,
padding: '10 0 0 0',
animate: true,
shadow: false,
style: 'background: #fff;',
legend: {
position: 'bottom',
boxStrokeWidth: 0,
labelFont: '12px Helvetica'
},
store: this.myDataStore,
insetPadding: 40,
items: [{
type : 'text',
text : 'Column Charts - Stacked Columns',
font : '22px Helvetica',
width : 100,
height: 30,
x : 40, //the sprite x position
y : 12 //the sprite y position
}, {
type: 'text',
text: 'Data: Browser Stats 2012',
font: '10px Helvetica',
x: 12,
y: 380
}, {
type: 'text',
text: 'Source: ',
font: '10px Helvetica',
x: 12,
y: 390
}],
axes: [{
type: 'Numeric',
position: 'left',
grid: true,
fields: ['data1'],
label: {
renderer: function(v) { return v + '%'; }
},
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['month'],
label: {
rotate: {
degrees: -45
}
}
}],
series: [{
type: 'column',
axis: 'left',
title: [ 'IE', 'Firefox', 'Chrome', 'Safari' ],
xField: 'month',
yField: [ 'data1', 'data2', 'data3', 'data4' ],
stacked: true,
style: {
opacity: 0.80
},
highlight: {
fill: '#000',
'stroke-width': 1,
stroke: '#fff'
},
tips: {
trackMouse: true,
style: 'background: #FFF',
height: 20,
renderer: function(storeItem, item) {
var browser = item.series.title[Ext.Array.indexOf(item.series.yField, item.yField)];
this.setTitle(browser + ' for ' + storeItem.get('month') + ': ' + storeItem.get(item.yField) + '%');
}
}
}]
}];
this.callParent();
}
});
Extjs中做Chart柱状图统计时怎么限制柱子的最大宽度？
设置样式就行了，给你个例子
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': 10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data': 27 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
style: { width: 10 },
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}
]
});
Extjs GridPanel构造器参数意思
如楼上所说,其实都是一些简写,当然你可以把cm写成ColumModel,
系统定义了一套简写模式,叫做:ExtJs中的xtype类型.
定义
xtype就是一个代表类（Class）的标识名字。
譬如，你有这个类，名字是Ext.ux.MyGrid。正常情况下你需要用这个名字来实例化这个类（创建类的对象）。
除了类名外，你还可以这样登记类的xtype：
Ext.reg('mygrid', Ext.ux.MyGrid);
其中xtype 是 mygrid 而类名的一般形式是Ext.ux.MyGrid。上面的语句登记了新的xtype ，换种说法说，xtype mygrid 与类 Ext.ux.MyGrid是连在一起的。
到底有什么好处？
延时实例化
下面是一些资料,但是不全,你在网上再找找吧,我也初学
.基本组件：
xtype Class 描述
button Ext.Button 按钮
splitbutton Ext.SplitButton 带下拉菜单的按钮
cycle Ext.CycleButton 带下拉选项菜单的按钮
buttongroup Ext.ButtonGroup 编组按钮(Since 3.0)
slider Ext.Slider 滑动条
progress Ext.ProgressBar 进度条
statusbar Ext.StatusBar 状态条，2.2加进来，3.0 又去了
colorpalette Ext.ColorPalette 调色板
datepicker Ext.DatePicker 日期选择面板
容器及数据类组件
xtype Class 描述
window Ext.Window 窗口
viewport Ext.ViewPort 视口，即浏览器的视口，能随之伸缩
box Ext.BoxComponent 盒子组件，相当于一个 div
component Ext.Component 组件
container Ext.Container 容器
panel Ext.Panel 面板
tabpanel Ext.TabPanel 选项面板
treepanel Ext.tree.TreePanel 树型面板
flash Ext.FlashComponent 显示 Flash 的组件(Since 3.0)
grid Ext.grid.GridPanel 表格
editorgrid Ext.grid.EditorGridPanel 可编辑的表格
propertygrid Ext.grid.PropertyGrid 属性表格
editor Ext.Editor 编辑器
dataview Ext.DataView 数据显示视图
listview Ext.ListView 列表视图
工具栏组件：
xtype Class 描述
paging Ext.PagingToolbar 分页工具条
toolbar Ext.Toolbar 工具栏
tbbutton Ext.Toolbar.Button 工具栏按钮
tbfill Ext.Toolbar.Fill 工具栏填充区
tbitem Ext.Toolbar.Item 工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacer Ext.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext Ext.Toolbar.TextItem 工具栏文本项
菜单组件：
xtype Class 描述
menu Ext.menu.Menu 菜单
colormenu Ext.menu.ColorMenu 颜色选择菜单
datemenu Ext.menu.DateMenu 日期选择菜单
menubaseitem BaseItem
menucheckitem Ext.menu.CheckItem 选项菜单项
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator 菜单分隔线
menutextitem Ext.menu.TextItem 文本菜单项
表单及表单域组件：
xtype Class 描述
form Ext.FormPanel/Ext.form.FormPanel 表单面板
checkbox Ext.form.Checkbox 多选框
combo Ext.form.ComboBox 下拉框
datefield Ext.form.DateField 日期选择项
timefield Ext.form.TimeField 时间录入项
field Ext.form.Field 表单字段
fieldset Ext.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor HTML 编辑器
label Ext.form.Label 标签
numberfield Ext.form.NumberField 数字编辑器
radio Ext.form.Radio 单选按钮
textarea Ext.form.TextArea 多行文本框
textfield Ext.form.TextField 表单文本框
trigger Ext.form.TriggerField 触发录入项
checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2)
displayfield Ext.form.DisplayField 仅显示，不校验/不被提交的文本框
radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2)
图表组件：
xtype Class 描述
chart Ext.chart.Chart 图表组件
barchart Ext.chart.BarChart 柱状图
cartsianchart Ext.chart.CartesianChart
columnchart Ext.chart.ColumnChart
linechart Ext.chart.LineChart 连线图
piechart Ext.chart.PieChart 扇形图
数据集 Store：
xtype Class 描述
arraystore Ext.data.ArrayStore
directstore Ext.data.DirectStore
groupingstore Ext.data.GroupingStore
jsonstore Ext.data.JsonStore
simplestore Ext.data.SimpleStore
store Ext.data.Store
xmlstore Ext.data.XmlStore
