laodaobazi
- 浏览: 277451 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
zhuzhuhenzhencheng：
密码是什么啊
Ext表格（Grid）上面的悬浮提示 -
鹿惊_：
确实如雪中送炭般温暖！
Ext扩展整理后吐血奉献 -
ortega1_2_3：
该版本貌似有bug，当sockIOPool的自平衡线程self ...
Java MemCached Window简单实现 -
q6952592：
好。解决了我的兼容模式下出现的问题。
Ext表格（Grid）上面的悬浮提示 -
fei33423：
请参考 fei33423的文章 java中直接调用groovy ...
Groovy应用（Java与Groovy间相互调用）
对 Ext 扩展的一些小总结
1、multicombo （多选下拉框）
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
var formPanel = new Ext.FormPanel({
height : 100,// 表单面板的高度
width : 400,// 表单面板的宽度
labelWidth : 120,// 字段标签宽度
labelAlign : "right",// 字段标签对齐方式
fileUpload: true,//支持文件上传
defaults : {// 默认form元素类型为textfield
xtype : "textfield",// 默认类型为textfield
width : 150 // 默认宽度
},
items : [{
xtype:'multicombo',
id : 'multicombo' ,
width:250,
store: new Ext.data.SimpleStore({
fields: ["name","value"],
data:[['测试菜单1',1],['测试菜单2',2],['测试菜单3',3],['测试菜单4',4]]}),
valueField :"value",
displayField: "name",
labelSeparator:'：',
displaySeparator:';',
valueSeparator:',',
mode: 'local',
value:'1,2',
forceSelection: true,
hiddenName:'test',
editable: true,
triggerAction: 'all',
allowBlank:false,
emptyText:'请选择',
fieldLabel: '多选下拉ComBo'
}],
buttons : [{
text : '提交',
type : 'submit',
handler : function() {
Ext.Msg.alert('提交',Ext.getCmp('multicombo').getRawValue());
}
}]
});
formPanel.render("multicombo-div");
});
如图：
源码包见附件：multiCombox.rar 解压后，multiCombox\examples\form 目录下打开MultiComboBox.html，可见效果。
2、combotree（下拉树）
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Customizing ComboBoxTree</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ext-2.3.0/resources/css/ext-all.css" />
<script src="<%=request.getContextPath() %>/ext-2.3.0/adapter/ext/ext-base.js"></script>
<script src="<%=request.getContextPath() %>/ext-2.3.0/ext-all.js"></script>
<script src="<%=request.getContextPath() %>/js/ComboBoxTree.js"></script>
<script type="text/javascript">
var comboBoxTree;
Ext.BLANK_IMAGE_URL = 'ext-2.3.0/resources/images/default/s.gif';
Ext.onReady(function(){
comboBoxTree = new Ext.ux.ComboBoxTree({
renderTo : 'comboBoxTree',
width : 250,
tree : {
xtype:'treepanel',
bbar: ['名称：',{xtype:'trigger',id: 'searchName',width:200,triggerClass:'x-form-search-trigger',onTriggerClick:search}],
loader: new Ext.tree.TreeLoader({dataUrl:'getNodes.jsp'}),
root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'})
},
//all:所有结点都可选中
//exceptRoot：除根结点，其它结点都可选(默认)
//folder:只有目录（非叶子和非根结点）可选
//leaf：只有叶子结点可选
selectNodeModel:'leaf'
});
});
function showValue(){
alert("显示值="+comboBoxTree.getRawValue()+" 真实值="+comboBoxTree.getValue());
}
function search(){
var searchName = Ext.getDom('searchName').value;
alert("查询字符串："+searchName);
}
</script>
</head>
<body>
<table>
<tr>
<td> </td>
<td> <div id="comboBoxTree"></div> </td>
<td> <input type='button' value='值' onclick='showValue()'> </td>
</tr>
</table>
</body>
</html>
getNodes.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%
String id = request.getParameter("node");
String listNode = "[";
if(id.length()<5){
for(int i=1;i<6;i++){
listNode += "{id:'"+i+"_"+id+"',text:'folder"+i+"_"+id+"'},";
}
listNode = listNode.substring(0,listNode.length()-1) + "]";
}else{
for(int i=1;i<6;i++){
listNode += "{id:'"+i+"_"+id+"',text:'node"+i+"_"+id+"',leaf:true},";
}
listNode = listNode.substring(0,listNode.length()-1) + "]";;
}
out.print(listNode);
%>
效果图：
所需附件 combotree.rar 已经上传。
3、级联 combo 的实现
Ext.BLANK_IMAGE_URL = '../../lib/ext-2.1/resources/images/default/s.gif';
var store = null;
var comboBox = null;
var store1 = null;
var comboBox1 = null;
function CreatComboBox() {
if (store1 == null) {
store1 = new Ext.data.JsonStore(
{
url : 'com_getData.action?source=Province&keycolumnname=ID&valuecolumnname=PName',
//totalProperty:"totalPorperty",root:"result",
fields : [ 'key', 'value' ]
});
store1.load();
comboBox1 = new Ext.form.ComboBox({
fieldLabel : '省级行政单位',
id : 'province',
store : store1,
emptyText : "请选择",
mode : 'local',
typeAhead : true,
triggerAction : 'all',
valueField : 'key',
displayField : 'value',
selectOnFocus : true,
width : 240,
border : true,
frame : true
});
}
if (store == null) {
comboBox1
.on(
'select',
function(combox) {
//source的名称要和pojo的名称一致
var url = "com_getDateByPkpage.action?source=City&keycolumnname=ID&valuecolumnname=CityName&FKname=Pid&FKValue="
+ combox.value
store.proxy = new Ext.data.HttpProxy({
url : url
});
store.load({
params : {
start : 0,
limit : 6
},//传入后台的分页数据
callback : function(r) {
if (r.length >= 1) {
var key = r[0].get('value');
comboBox.setValue(key);
}
}
});
});
store = new Ext.data.JsonStore({
totalProperty : "totalporperty",
root : "result",//后台返回的分页后的数据
fields : [ 'key', 'value' ]
});
comboBox = new Ext.form.ComboBox({
id : "city",
store : store,
fieldLabel : '市级行政单位',
emptyText : '请选择',
mode : 'remote',//指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载则为remote.默认值为：remote
typeAhead : true,
triggerAction : 'all',
valueField : 'key',
displayField : 'value',
selectOnFocus : true,
minListWidth : 220,//设置下拉列表的宽度，如果不指定分页工具栏可能会显示不全
width : 240,
border : true,
frame : true,
resizable : true,
pageSize : 6
//当元素加载的时候，如果返回的数据为多页，则会在下拉列表框下面显示一个分页工具栏，该属性指定每页的大小
//在点击分页导航按钮时，将会作为start及limit参数传递给服务端，默认值为0，只有在mode='remote'的时候才能够使用
});
}
}
Ext.onReady(function() {
Ext.QuickTips.init();
CreatComboBox();
var form = new Ext.form.FormPanel({
title : '级联',
labelWidth : 80,
width : 400,
frame : true,
items : [ comboBox1, comboBox ]
});
form.render("form");
});
效果图：
4、可编辑的树表 EditTreeGrid ：
附件 TreeGridEditor v1.4.0-rc1.rar 已经上传。
5、可编辑的树表 EditGridTree 的另一个扩展
附件 edittreegrid-1.3.rar 已上传。
6、数据表格 ExplorerView
var grid, grid2;
Ext.onReady(function(){
Ext.QuickTips.init();
var reader = new Ext.data.ArrayReader({}, [
{name: 'name'},
{name: 'modified', type: 'date', dateFormat: 'Y-m-d H:i'},
{name: 'type'},
{name: 'size'},
{name: 'icon'}
]);
var largeIcons = new Ext.Template(
'<div class="x-grid3-row ux-explorerview-item ux-explorerview-large-item" unselectable="on">'+
'<table class="ux-explorerview-icon" cellpadding="0" cellspacing="0">'+
'<tr><td align="center"><img src="images/large-{icon}"></td></tr></table>'+
'<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}</div></div></div>'
);
var mediumIcons = new Ext.Template(
'<div class="x-grid3-row ux-explorerview-item ux-explorerview-medium-item">'+
'<table class="ux-explorerview-icon" cellpadding="0" cellspacing="0">'+
'<tr><td align="center"><img src="images/medium-{icon}"></td></tr></table>'+
'<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}</div></div></div>'
);
var smallIcons = new Ext.Template(
'<div class="x-grid3-row ux-explorerview-item ux-explorerview-small-item">'+
'<div class="ux-explorerview-icon"><img src="images/small-{icon}"></div>'+
'<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}</div></div></div>'
);
var tileIcons = new Ext.Template(
'<div class="x-grid3-row ux-explorerview-item ux-explorerview-tiles-item">'+
'<div class="ux-explorerview-icon"><img src="images/medium-{icon}"></div>'+
'<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}<br/><span>{type}</span></div></div></div>'
);
function changeView(item, checked) {
var tpl;
if (checked) {
if (item.text == 'Large Icons')
tpl = largeIcons;
else if (item.text == 'Medium Icons')
tpl = mediumIcons;
else if (item.text == 'Small Icons')
tpl = smallIcons;
else if (item.text == 'Tiles')
tpl = tileIcons;
else
tpl = null;
grid.getView().changeTemplate(tpl);
grid2.getView().changeTemplate(tpl);
}
}
grid = new Ext.grid.GridPanel({
store: new Ext.data.GroupingStore({
reader: reader,
data: Ext.grid.dummyData,
sortInfo: {field: 'modified', direction: 'DESC'},
groupField: 'type'
}),
columns: [
{header: 'Name', sortable: true, dataIndex: 'name'},
{header: 'Modified', width: 40, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d H:i'), dataIndex: 'modified'},
{header: 'Type', width: 40, sortable: true, dataIndex: 'type'},
{header: 'Size', width: 40, sortable: true, dataIndex: 'size', align: 'right', renderer: Ext.util.Format.fileSize}
],
view: new Ext.ux.grid.GroupingExplorerView({
rowTemplate: largeIcons,
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]})'
}),
tbar: new Ext.Toolbar({
items: [{
text: 'Views',
menu: [{
group: 'view',
checkHandler: changeView,
checked: false,
text: 'Extra Large Icons',
iconCls: 'view-xl-icons',
disabled: true
}, {
group: 'view',
checkHandler: changeView,
checked: true,
text: 'Large Icons',
iconCls: 'view-l-icons'
}, {
group: 'view',
checkHandler: changeView,
checked: false,
text: 'Medium Icons',
iconCls: 'view-m-icons'
},{
group: 'view',
checkHandler: changeView,
checked: false,
text: 'Small Icons',
iconCls: 'view-s-icons'
}, '-', {
group: 'view',
checkHandler: changeView,
checked: false,
text: 'List',
iconCls: 'view-list',
disabled: true
}, '-', {
group: 'view',
checkHandler: changeView,
checked: false,
text: 'Details',
iconCls: 'view-details'
}, '-', {
group: 'view',
checkHandler: changeView,
checked: false,
text: 'Tiles',
iconCls: 'view-tiles'
}]
}]
}),
enableDragDrop: true,
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'ExplorerView Example with Grouping',
iconCls: 'icon-grid',
renderTo: document.body
});
grid2 = new Ext.grid.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: Ext.grid.dummyData,
sortInfo: {field: 'modified', direction: 'DESC'}
}),
columns: [
{id: 'name', header: 'Name', sortable: true, dataIndex: 'name'},
{header: 'Modified', width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d H:i'), dataIndex: 'modified'},
{header: 'Type', width: 120, sortable: true, dataIndex: 'type'},
{header: 'Size', width: 120, sortable: true, dataIndex: 'size', align: 'right', renderer: Ext.util.Format.fileSize}
],
viewConfig: {
rowTemplate: tileIcons
},
enableDragDrop: true,
autoExpandColumn: 'name',
frame: true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'ExplorerView Example without Grouping',
iconCls: 'icon-grid',
renderTo: document.body
});
});
Ext.grid.dummyData = [
['Program Files', '2008-01-01 00:00', 'File Folder', 0, 'folder.png'],
['Program Files (x86)', '2008-01-01 00:03', 'File Folder', 0, 'folder.png'],
['ProgramData', '2008-02-06 13:21', 'File Folder', 0, 'folder.png'],
['temp', '2007-12-05 00:59', 'File Folder', 0, 'folder.png'],
['Users', '2008-05-01 18:08', 'File Folder', 0, 'folder.png'],
['Windows', '2008-01-01 04:57', 'File Folder', 0, 'folder.png'],
['install.exe', '2008-08-17 03:42', 'Application', 561671, 'application.png'],
['globdata.ini', '2008-10-01 16:01', 'Configuration Settings', 3214, 'application-settings.png'],
['VC_RED.MSI', '2008-10-09 07:31', 'Application', 9498742, 'application-installer.png'],
['VC_RED.cab', '2008-10-09 07:31', 'WinRAR Archive', 65789416, 'winrar-archive.png']
];
可以实现试图间的变换，如图：
附件 explorerview.rar 已经上传。
7、可以实现过滤的树 TreeFilter
Ext.onReady(function(){
var myTree = new Ext.tree.TreePanel({
renderTo:'mytree',
rootVisible:false,
width:200,
height:400,
autoScroll:true,
tbar:new Ext.Toolbar(),
root:new Ext.tree.AsyncTreeNode({
children: [{
id: 'level',
text: '用户类型',
children: [{
id: 'allLevel',
text: '全部',
leaf: true
}, {
id: 'noSupport',
text: '无支持',
leaf: true
}, {
id: 'month',
text: '包月',
leaf: true
}, {
id: 'year',
text: '包年',
leaf: true
}, {
id: 'always',
text: '终身',
leaf: true
}]
}, {
id: 'outOfDate',
text: '是否过期',
children: [{
id: 'allOutOfDate',
text: '全部',
leaf: true
}, {
id: 'notOutOfDate',
text: '未过期',
leaf: true
}, {
id: 'alreadyOutOfDate',
text: '已过期',
leaf: true
}]
}, {
id: 'report',
text: '统计图表',
children: [{
id: 'levelReport',
text: '按用户类型',
leaf: true
}, {
id: 'outOfDateReport',
text: '按是否过期',
leaf: true
}]
}]
})
});
var filterFiled = new Ext.form.TextField({
width:150,
emptyText:'快速检索',
enableKeyEvents: true,
listeners:{
render: function(f){
this.myFilter = new QM.ux.TreeFilter(myTree,{
clearAction : 'expand'
});//初始化TreeFilter
},
keyup: {//添加键盘点击监听
fn:function(field,e){
field.myFilter.filter(field.getValue());
},
buffer: 450
}
}
});
myTree.expandAll();
var tbar = myTree.getTopToolbar();
tbar.add(filterFiled);
tbar.doLayout();
});
效果图：
附件 TreeFilter.rar 已上传。
8、ECOTree 如图：
附件 TreeDemo.rar 。
9、密码强度的现实 PasswordMeter 如图：
附件 ：PasswordMeter.rar
10、图片字段 imagefield ： 如图：
JS 代码：
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'ext-2.3.0/resources/images/default/s.gif';
Ext.QuickTips.init();
var store = new Ext.data.JsonStore({
url: 'image.json',
root: 'images',
fields: [
'name',
'url',
{name:'size', type: 'float'},
{name:'lastmod', type:'date', dateFormat:'timestamp'}
]
});
// create the template to use with the DataView
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" alt="{shortName}" title="{name}" /></div>',
'</div>',
'</tpl>'
);
// create the DataView
var imageView = new Ext.DataView({
store: store,
tpl: tpl,
autoHeight:true,
autoWidth: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',
loadingText: 'Loading...',
singleSelect: true
});
// create the test form
var form = new Ext.form.FormPanel({
xtype:'form',
title:'Ext.ux.form.ImageField',
frame:true,
labelWidth:70,
width:240,
//height:300,
buttonAlign: 'right',
id:'form',
url:'form_dump.php',
defaults : {
width : 150,
labelSeparator: ''
},
items:[{
xtype: 'textfield',
id:'user',
fieldLabel:'Username',
allowBlank: false
},{
xtype: 'textfield',
id:'pass',
fieldLabel:'Password',
allowBlank: false
},
new Ext.ux.form.ImageField({
fieldLabel : 'Avatar',
name: 'avatar',
msgTarget: 'title',
view: imageView,
browserWidth: 275,
windowConfig: {
cls: 'images-view'
},
id: 'avatarimage',
defaultImage: 'image/blank.png'
})
],
buttons:[{
text:'submit',
handler: function(){
form.getForm().submit();
}
}]
});
form.render('form-ct');
});
附件： imagefield.rar
11、分组的下拉框 groupcombo 如图：
附件 groupcombo.rar
12、cellActions 表格中添加图标按钮 如图：
附件 ：cellActions.rar
13、 带图标的下拉框 IconCombo 如图
Ext.namespace('Ext.ux.plugins');
/**
* Ext.ux.plugins.IconCombo plugin for Ext.form.Combobox
* @author Ing. Jozef Sakalos
* @date January 7, 2008
* @class Ext.ux.plugins.IconCombo
* @extends Ext.util.Observable
*/
Ext.ux.plugins.IconCombo = function(config) {
Ext.apply(this, config);
};
// plugin code
Ext.extend(Ext.ux.plugins.IconCombo, Ext.util.Observable, {
init:function(combo) {
Ext.apply(combo, {
tpl: '<tpl for=".">'
+ '<div class="x-combo-list-item ux-icon-combo-item '
+ '{' + combo.iconClsField + '}">'
+ '{' + combo.displayField + '}'
+ '</div></tpl>',
onRender:combo.onRender.createSequence(function(ct, position) {
// adjust styles
this.wrap.applyStyles({position:'relative'});
this.el.addClass('ux-icon-combo-input');
// add div for icon
this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
tag: 'div', style:'position:absolute'
});
}), // end of function onRender
setIconCls:function() {
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
if(rec) {
this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
}
}, // end of function setIconCls
setValue:combo.setValue.createSequence(function(value) {
this.setIconCls();
})
});
} // end of function init
}); // end of extend
附件：IconCombo.rar
14 、下拉树多选 ComboBoxCheckTree ：如图
附件 ComboBoxCheckTree.rar 已上传。
15、实现Tree的叶子节点的跳动：
源码：
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>Jump Tree</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()+request.getSession().getAttribute("theme")%>/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext/ext-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//叶子节点跳动
function jumpIcon(id, duration){
var node = Ext.getCmp('userTree').getNodeById(id);
node.attributes['jump']='true' ;
if(node){
if(isNaN(duration))duration = 800;
var iconEl = node.ui.getIconEl();
var textEl = node.ui.getTextEl();
var handler = window.setInterval(function(){
if(node.attributes.jump == 'true'){//是否跳动的标志
iconEl.style.marginLeft = "5px";
textEl.style.marginLeft = "3px";
}
window.setTimeout(function(){
iconEl.style.marginLeft = "";
textEl.style.marginLeft = "";
if(node.attributes.jump != 'true'){return;}
},duration/2);
}, duration);
}
};
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '${pageContext.request.contextPath}/js/ext/resources/images/default/s.gif';
var tree = new Ext.tree.TreePanel({
id: 'userTree' ,
renderTo: 'tree-div',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
text : 'Root' ,
children: [{
text: 'User 1',
leaf: true ,
id : 'aaa'
}, {
text: 'User 2',
leaf: true ,
id : 'bbb'
}, {
text: 'User 3',
leaf: true ,
id : 'ccc'
}]
}),
listeners : {
'dblclick' : function(node,e){
node.attributes['jump']='false' ;
Ext.Msg.alert("提示",node.text+" 停止跳动");
},
'click' : function(node,e){
jumpIcon(node.id,600);
}
}
});
tree.getRootNode().expand();
});
</script>
</head>
<body>
<div id="tree-div"></div>
</body>
</html>
效果图就不上传了，上传静态图片看不出来效果。
- 大小: 4.6 KB
- multiCombox.rar (469.8 KB)
- 下载次数: 551
- 大小: 10.8 KB
- combotree.rar (3.5 KB)
- 下载次数: 210
- 大小: 6.5 KB
- 大小: 7.9 KB
- 大小: 27.2 KB
- 大小: 34.7 KB
- edittreegrid-1.3.rar (1.4 MB)
- 下载次数: 218
- TreeGridEditor_v1.4.0-rc1.rar (1.6 MB)
- 下载次数: 217
- 大小: 21.4 KB
- 大小: 10.1 KB
- 大小: 11.2 KB
- explorerview.rar (64.4 KB)
- 下载次数: 192
- 大小: 2.8 KB
- TreeFilter.rar (25.6 KB)
- 下载次数: 156
- 大小: 14.7 KB
- TreeDemo.rar (1.6 MB)
- 下载次数: 219
- 大小: 6 KB
- PasswordMeter.rar (8.3 KB)
- 下载次数: 154
- 大小: 34.9 KB
- imagefield.rar (31.6 KB)
- 下载次数: 185
- 大小: 13 KB
- groupcombo.rar (4.8 KB)
- 下载次数: 138
- 大小: 13 KB
- cellActions.rar (12 KB)
- 下载次数: 146
- 大小: 5.7 KB
- IconCombo.rar (7.6 KB)
- 下载次数: 165
- 大小: 6 KB
- ComboBoxCheckTree.rar (4.7 KB)
- 下载次数: 222
分享到：
评论
10 楼
鹿惊_
2016-01-03
确实如雪中送炭般温暖！
9 楼
zanggj0618
2014-08-24
感谢楼主无私奉献
8 楼
lian819
2014-07-11
尽管过了这么长的时间, Ext都出到5了, 但是好文要顶!
7 楼
ncx1259988
2014-05-28
感谢楼主的分享，想请教您一下扩展怎么做，可以出个详细教程吗？
6 楼
laodaobazi
2014-03-26
小铁匠再战江湖 写道
你好，感谢你的分享。问一个小问题，我跑了第一个demo，做出的效果有点小问题：下拉菜单内容中的多选框未能出现，请问是什么问题
有可能是你样式没有引用上吧，firebug调试一下
5 楼
木易三世
2014-03-11
好人！顶了！
4 楼
小铁匠再战江湖
2014-02-15
你好，感谢你的分享。问一个小问题，我跑了第一个demo，做出的效果有点小问题：下拉菜单内容中的多选框未能出现，请问是什么问题
3 楼
evilc
2012-12-10
LZ好猛啊
2 楼
yzlgzx
2012-11-15
支持！强人，继续跪拜，学习。如雪中送炭般的温暖
1 楼
daniel514
2012-10-16
强人啊，跪拜，学习
发表评论
-
JSON查看工具
2012-03-09 22:26 0Eclipse 的json插件: 这款插件主要功能是把jso ... -
gzip压缩JavaScript
2012-02-13 17:14 5753为了提高客户端的体验效果，RIA开发逐渐兴起。这样 ... -
JSON LIB转化时间
2011-11-02 09:32 1388Ext Grid显示Json lib 转化时间为object的 ... -
JS计算日期差
2011-09-24 14:04 1634function Computation(sDate1,sDa ... -
将Air文件转换为EXE进行部署
2011-06-14 17:21 1740如果你的air sdk还没有升级到2.0 那显然是不行的. ... -
禁止IE的backspace键(退格键)，但输入文本框时不禁止
2011-06-09 09:59 3707Ext实现方式： Ext.getDoc().on('keyd ... -
Ext中集成在线编辑器Ext.ux.TinyMCE
2011-05-31 15:46 3116Ext.ux.TinyMCE第三方对Ext 在线编辑器的扩展， ... -
Ex的Ajax请求实现同步
2011-05-31 15:29 1371Ext2,.x的Ajax实现同步 Ext.lib.Ajax. ... -
JS实现将XML转化为JSON
2011-05-31 15:09 5607直接上代码 xmlToJson={ parser: ... -
Ext表格（Grid）上面的悬浮提示
2011-05-30 16:36 7642方法一 使用render //鼠标放在Grid上面显示提示 ... -
开发者最容易犯的13个JavaScript错误
2011-04-25 10:28 7461.for.. 数组迭代的用法 U ... -
Ext皮肤切换
2011-04-22 10:46 3378/** * @author JLee * @since ... -
JS获取屏幕大小
2011-04-18 16:56 1252<html> <script> f ... -
在js中对中文和特殊字符转码
2011-04-14 14:21 3961直接上代码 js对文字进行编码涉及3个函数：escape,e ... -
Aptana 构建 Air 项目（集成ExtJS）
2011-03-17 01:00 35051、安装Aptana IDE ... -
XTemplate
2011-03-16 14:07 4582Ext XTemplate的应用： template. ... -
读取Properties文件中的内容填充本地combo
2011-03-10 16:24 1858首先定义一个properties文件放到classpath路径 ... -
汉字转换为拼音
2011-03-09 10:11 4619首先定义一个html页面： ... -
Ext Grid 实现批量添加或者修改
2011-03-02 22:30 4539将ExtJS Grid 中的record逐一转化为Bean，实 ... -
ExtJS中submit与Ajax的success
2010-11-12 23:10 7923Ajax中使用Success使用response接收后台传来的 ...
相关推荐
另外，还有一些扩展和插件，如Ext.ux.chart.zip，这可能是一个图表扩展，EXT JS本身虽然提供了基础的图表组件，但这个扩展可能提供了更高级的图表类型或自定义选项。 三、EXT学习资源 1. `ext_core_manual_zhcn.pdf...
codePress 是一个强大的在线代码编辑器，它作为一个扩展与EXT框架集成，提供了丰富的代码高亮显示功能，使得在网页上进行代码编辑变得更加便捷和高效。EXT是一个流行的JavaScript库，用于构建富客户端应用程序，其...
EXTJS以其强大的组件模型和优雅的数据绑定机制而闻名，其中"EXT 扩展子列表头"是EXTJS框架中的一种功能，主要应用于数据展示和交互。本文将深入探讨这个主题，以及如何在EXTJS中实现列表头的分层结构。 "EXT 扩展...
Ext组件扩展包 - DateTime 是一个专门用于增强JavaScript应用程序中日期和时间处理能力的工具集。在Web开发中，尤其在创建交互式用户界面时，日期和时间选择器是不可或缺的一部分。此扩展包提供了美观且功能丰富的...
在本文中，我们将深入探讨`Ext`框架中的`dateField`扩展，特别是在允许用户选择不同时间范围方面的能力，如年月日、年月、年或仅月。`Ext`是Sencha公司开发的一个强大的JavaScript应用框架，常用于构建富客户端Web...
Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
在IT行业中，"ext扩展 延时加载"是一个关于前端开发的重要概念，特别是对于使用Ext JS框架的应用程序。Ext JS是一个强大的JavaScript库，用于构建数据驱动的富客户端应用程序。延时加载（Lazy Loading）是一种优化...
"Ext扩展控件，支持复制，粘贴，剪切"这个主题涉及到的是ExtJS中的自定义插件开发，用于增强其内置控件的功能，特别是添加了常见的文本编辑操作，如复制（Copy）、粘贴（Paste）和剪切（Cut）。 在标准的Web浏览器...
EXT 扩展是基于 JavaScript 的前端开发框架 EXTJS 的一种增强功能，它提供了一系列丰富的组件和工具，使得开发者能够构建出交互性强、用户体验优秀的 web 应用程序。在本案例中，"Flash 表单上传组件"是 EXT 扩展中...
而ol-ext是针对OpenLayers的一个扩展插件，它增加了许多额外的功能和视觉效果，使得地图开发更为便捷和美观。 在2022年4月发布的ol-ext版本v3.2.23中，我们关注以下几个关键知识点： 1. **图形和符号**：ol-ext...
"Ext扩展控件，可以用图片显示百分之多少"的标题揭示了一个特定的EXT控件功能，它允许将表格（grid）中的百分比数据以图形化的方式——进度条图片——进行呈现，这样不仅美观，还能更有效地传达信息。 EXT Grid是一...
Ext中文手册，Ext2.0API, ExtJs2.0教程chm,Ext2.2docs.chm