html引用extjs文件,普通html页面form表单控件引用ExtJs form表单控件样式

ExtJs日期控件：

//ExtJs代码

Ext.onReady(function() {

// 使用表单提示

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式

// 日期

var _kssj = new Ext.form.DateField({

applyTo : 'kssj',//节点的id

width : 185,

editable : false,

format : 'Y-m-d',

emptyText : ''

});

});

ExtJs下拉列表控件：

Ext.onReady(function() {

// 使用表单提示

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式

// 把已有的下拉框改变为Ext样式select or comboBox

var objArray = Ext.DomQuery.select("select");

Ext.each(objArray, function(obj) {

var btn = new Ext.form.ComboBox({

typeAhead : true,

triggerAction : 'all',

transform : obj,

forceSelection : true

});

});

var mzComboBox = new Ext.form.ComboBox({

applyTo : 'mzmc',

width : 185,

listWidth : 250,// 设置下拉框的宽度，默认和comboBoxTree的宽度相等

// maxHeight:'300',//combobox下拉列表框的高度

fieldLabel : '',

name : 'mz',

triggerAction : 'all',

forceSelection : true,

editable : false,

pageSize : 10,

emptyText : '',

hiddenName : 'code',

displayField : 'text',// 名称

valueField : 'code',// 值

store : new Ext.data.JsonStore({

autoLoad : true,

url : 'Util/mzList.action?format=json',

root : 'mzList',

baseParams : {

limit : 10,

start : 0

},

totalProperty : 'mzCount',

fields : ['id', 'code', 'text']

}),

listeners : {

select : function(_combo) {

document.getElementById('mz').value = _combo.getValue();

}

}

});

});

ExtJs复选框控件：

Ext.onReady(function() {

// 使用表单提示

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式

//把已有的复选框改变为Ext样式

var objArray = Ext.DomQuery.select("input[type=checkbox]");

Ext.each(objArray, function(obj) {

var checkbox = new Ext.form.Checkbox({

applyTo : obj

});

});

});

ExtJs文本框控件：

Ext.onReady(function() {

// 使用表单提示

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式

var xm = new Ext.form.TextField({

width : '185',

applyTo : 'xm'

});

});

ExtJs其他form表单控件：

Ext.onReady(function()

{

// 使用表单提示

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side'; // 提示显示方式

Ext.override(Ext.form.ComboBox,

{

onViewClick : function(doFocus)

{

var index = this.view.getSelectedIndexes()[0], s = this.store, r = s

.getAt(index);

if (r)

{

this.onSelect(r, index);

}

else if (s.getCount() === 0)

{

this.collapse();

}

if (doFocus !== false)

{

this.el.focus();

}

}

}

);

//把普通html form 表单元素样式 改变为Ext样式

// button

var objArray = Ext.DomQuery.select("input[type=submit]");

Ext.each(objArray, function(obj)

{

var btn = new Ext.Button(

{

text :

obj.value, applyTo : obj, handler : obj.onclick, type : obj.type

}

);

btn.getEl().replace(Ext.get(obj));

}

);

// select or comboBox

var objArray = Ext.DomQuery.select("select");

Ext.each(objArray, function(obj)

{

var btn = new Ext.form.ComboBox(

{

typeAhead : true,

triggerAction : 'all',

transform : obj,

forceSelection : true

}

);

}

);

// text

var objArray = Ext.DomQuery.select("input[type=text]");

Ext.each(objArray, function(obj)

{

var txtField = new

Ext.form.TextField(

{

applyTo : obj

}

);

}

);

// textarea

var objArray = Ext.DomQuery.select("textarea");

Ext.each(objArray, function(obj)

{

var txtArea = new Ext.form.TextArea(

{

applyTo : obj

}

);

}

);

// checkbox and radio

var objArray = Ext.DomQuery.select("input[type=checkbox]");

Ext.each(objArray, function(obj)

{

var checkbox = new Ext.form.Checkbox(

{

applyTo : obj

}

);

}

);

var objArray = Ext.DomQuery.select("input[type=radio]");

Ext.each(objArray, function(obj)

{

var radio = new Ext.form.Radio(

{

applyTo : obj

}

);

}

);

}

);