该Ext.Widget类，或者只是“小部件”，类似于组件的一个轻量级类，但仅由一个Ext.dom.Element和相关的监听器构成。由于Ext.Widget类不是从Ext.Component派生使得widget跟其他普通的组件(component)不同。组件提供了强大的生命周期管理器，它增加了巨大数额的功能。然而这些功能带来一些开销。
Ext JS 5提供几个股票小部件，包括：
Progress Bar (Ext.ProgressBarWidget or “progressbarwidget”)
Slider (Ext.slider.Widget or “sliderwidget”)
Sparklines (Ext.sparkline.*)
Line (“sparklineline”)
Bar (“sparklinebar”)
Discrete (“sparklinediscrete”)
Bullet (“sparklinebullet”)
Pie (“sparklinepie”)
Box (“sparklinebox”)
TriState (“sparklinetristate”)
在本节中，我们将介绍如何使用和创建小部件。我们还将探索我们的最新创作，小工具栏。
1.使用Widgets
跟普通组件一样，widgets可以添加到容器的items中，下面的例子中，我们把sparkline（走势图）添加到toolbar中
[code lang=”js”]
var panel = Ext.create({
xtype: ‘panel’,
title: ‘Title’,
frame: true,
renderTo: Ext.getBody(),
width: 250, height: 150,
html: ‘Some text’,
tbar: [{
text: ‘Button’
}, ‘->’, {
xtype: ‘sparklineline’,
fillColor: ‘#ddf’,
width: 100,
height: 20,
values: [2, 3, 0, 4, -1]
}]
});
[/code]
就sparklines而言，你必须提供一个尺寸（包括宽度和高度）或者使用一个Ext JS layout来使用它。 这是因为widgets需要一个确定的尺寸来绘制图形。
2.使用Widgets Column
为了更方便使用Ext JS很容易的将组件添加到gird中。下面我们一起跟Widget Column 说 hello。
Widget Column让你很轻松添加component或者widget到grid的cell中，之前是不可以的。仅仅是将你的column的xtype属性设置为widgetcolumn并指定它的 widget配置. widget配置包含xtype去创建每个cell。关于xtype可以参考任何Ext.Widget 或者 Ext.Component 类.
使用widget column来添加sparkline widgets到grid中你可以实现下图效果
对于上图效果，更完整的例子请访问Kitchen Sink. (http://dev.sencha.com/deploy/touch/examples/production/kitchensink)
废话少说, 接下来让我们用事实证明。接下来的例子我们创建一个小的记录集（store）来填充一个使用了widget column的grid。这个widget column中每一行都拥有一个progress控件。
[code lang=”js”]
var store = Ext.create(‘Ext.data.Store’, {
fields: [‘name’,’progress’],
data: [
{ name: ‘Test 1’, progress: 0.10 },
{ name: ‘Test 2’, progress: 0.23 },
{ name: ‘Test 3’, progress: 0.86 },
{ name: ‘Test 4’, progress: 0.31 }
]
});
Ext.create({
xtype: ‘grid’,
title: ‘Widget Column Demo’,
store: store,
columns: [{
text: ‘Test Number’,
dataIndex: ‘name’,
width: 100
}, {
xtype: ‘widgetcolumn’,
text: ‘Progress’,
width: 120,
dataIndex: ‘progress’,
widget: {
xtype: ‘progressbarwidget’,
textTpl: ‘{value:percent}’
}
}],
width: 220,
height: 250,
renderTo: Ext.getBody()
});
[/code]
3.理解“widget”配置
一个widget的配置是widget column用于创建小部件实例。基于包含在该插件的配置的xtype，widget column创建一个无论是从Ext.Widget或从Ext.Component派生的对象，这个配置都不能是一个实例因为widget column需要为cell提供一个实例。
然而widget配置用于创建所需的组件或部件的多个实例时，每个实例必须与网格中的特定记录和行连接，在cell的生命周期中一个行创建的widget将被“回收”，并且连接到不同的记录和行。
4.使用缓冲渲染
widgets中权重组件和进度条或滑块构件可以使您的网格响应能力更强，如果您的网格是可能包含更多的行，少数时要使用的”bufferedrenderer”插件。Bufferedrenderer 创建固定的数量的组件或窗口小部件。这些项目是从未呈现行回收然后添加到新创建的行
5.自定义Widgets
虽然 Ext JS 5 沿用”widget-ized”版本的滑块和进度条，以及新的sparklines，但是很有可能你需要自己创建一个自定义Widgets。
通过继承Ext.Widget和定义一些元素模板以及相应的监听来创建一个自定义widget
[code lang=”js”]
Ext.define(‘MyWidget’, {
extend: ‘Ext.Widget’,
// The element template – passed to Ext.Element.create()
element: {
reference: ‘element’,
listeners: {
click: ‘onClick’
},
children: [{
reference: ‘innerElement’,
listeners: {
click: ‘onInnerClick’
}
}]
},
constructor: function(config) {
// Initializes our element from the template, and calls initConfig().
this.callParent([config]);
// After calling the superclass constructor, the Element is available and
// can safely be manipulated. Reference Elements are instances of
// Ext.Element, and are cached on each Widget instance by reference name.
},
onClick: function() {
// Listeners use this Widget instance as their scope
console.log(‘element clicked’, this);
},
onInnerClick: function() {
// Access the innerElement reference by name
console.log(‘inner element clicked’, this.innerElement);
}
});
[/code]
这看起来像Sencha Touch组件。这是因为 Ext.Widget 是Sencha Touch的Ext.AbstractComponent 增强的版。将监听器添加到元素模板的能力是一种增强功能，但有极少数的改变。请参阅在 Ext.Widget 上的更多详细信息的文档。