calendar控件使用 extjs_ExtJS4.1常见问题及解决方案总结——小奎持续更新

Extjs是怎样的技术?它的主要功能是什么?

Extjs是一种用于开发富客户端Web应用程序的javascript技术,它不需要为客户端安装任何插件就可以实现丰富多彩的界面效果,是进行富客户端开发的理想选择之一。Extjs的主要功能包括:对标准信息提示框的扩展、对标准表单组件的扩展、支持面板及各种布局方式、提供了大量的工具类和工具方法、提供了增强的事件机制、提供了对Ajax功能的支持、具有结构完整的数据模型、提供了灵活易用的模板功能、提供了美观实用的各种组件(其中的代表是表格组件Grid和树型自己Tree)。

(1)ExtJS4.1自带API打不开的问题解决

在官网上下载的ExtJS4.1开发包中DOC文件包中带有ExtJS的API,但是直接打开index.html是打不开的,这时你可以用firebug调试一下,实际上是报错的,在哪里报的错呢?因为index.html引用的是ext.js文件,这个文件里面是有错误的,所以把它改成ext-all.js,就可以打开且不报错了。

Please try again!You can Do it!

(2)ExtJS4.1页面报错对象不支持"createContextualFragment"属性或方法的问题 IE9经常报错

if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment)

{

Range.prototype.createContextualFragment = function(html)

{

var frag = document.createDocumentFragment(),

div = document.createElement("div");

frag.appendChild(div);

div.outerHTML = html;

return frag;

};

}

运行发现,问题解决。

(3)ext groupRenderer为空或不是对象!!!

有可能是

上面

(4)ext groupRenderer为空或不是对象!!!

columns: 里面必须有要拿来分组的字段

(5)ext-base拒绝访问错误

项目访问ext的时候,用localhost可以成功访问,换成ip就报错。说是ext-base.js

拒绝访问。

原因:IE安全级别过高

(1)工具--internet选项--安全--自定义级别--其它-

(2)工具--internet选项--安全--自定义级别--其它--通过域访问数据源,设置为可用就可以了

(5)例外被抛出且未被接住

原因就是使用了layout:border布局 但是items里面没有一个region中间的界面  所有才会报错的  也就是没有加region:'center'。  我们东南西北的都可以不用要 但是中间的一定要的

(6)Ext.Tabpanel组件不能正常显示

tabpanel组件 本地显示,以及测试服务器上显示都是正常的,但是本地访问测试服务器上tabpanel的时候,点击切换tab,发现组件无法显示。

解决方法:

tabpanel添加如下事件

listeners: {

tabchange: function(tab, p){

p.doLayout();

}

}

(7)浏览器报 this.config[] is undefined

原因是在使用了autoExpandColumn : 'id',而在column中并未定义id属性

(8)ExtJs常见控件错位的问题

在用ExtJS做前端界面开发,你容易发现很多控件离奇错位,同时没有任何运行时错误,你会摸不着头脑。

其实这是由state引起的。ExtJS中的state机制,会使Component保存当前的一些state信息(包括布局、大小),很多state信息的保存都是自动的。当调用了Ext.state.Manager.setProvider函数后,内建的自动保存state信息的功能将会被启动。

当这些控件再次render的时候会读取之前保存的state信息,最终导致布局的错位。

解决这个问题的方法是,屏蔽掉Component自动保存state信息的功能。其中一种做法是设置Component的stateful默认值为false,即

Js代码

Ext.Component.prototype.stateful =false

这样既可以调用

Ext.state.Manager.setProvider

函数来保存特定的控件的state信息,同时不打乱其它控件的布局。

(9)ExtJs版本问题导致日历控件在IE上显示不全的解决办法.........

0818b9ca8b590ca3270a3433284dd417.png

重写一下DateField控件

1

/*

2011-03-04 cx

2

修正日期控件在IE显示不完全的问题

3

*/

4

Ext.

override

(Ext.menu.Menu, {

5

autoWidth: function () {

6

this

.width

+=

"

px

"

;

7

}

8

});

(10)表单布局文本中,如combo、dateField等控件只读属性时失去理想效果

如果想要设置只读属性,而还是想要combo、dateField等效果时,

可以将readOnly=true;删除掉,修改为editable: false;

具体细节请查看API文档

(11)tabPanel 溢出怎么办? 这里使用Extjs4.2为例:

一、在ext-4.2.1-gpl文件夹中搜索TabScrollerMenu相关文件,

二、将TabScrollerMenu.js(插件)、tab-scroller-menu.js(示例文件)、TabScrollerMenu.css(样式)文件拷贝在自己项目中,

三、然后看TabScrollerMenu.css文件引用的一个tab-scroller-menu.gif文件拷贝自己项目中。

四、在自己的html里引用这3个文件,建议在css的代码直接引用html中无需加载外部。

五、加入样式文件后即可显示。

六、在自己的tabpanel中使用插件

var pnCenter=new Ext.TabPanel({

id: 'pnCenter',

region:'center',

activeTab:0,

margins: '0 0 0 0',

padding: '0 0 0 0',

enableTabScroll : true, // 是否允许存在滚动条

deferredRender : false,

plugins: [Ext.create('Ext.ux.TabScrollerMenu', {// 溢出选项卡插件

ptype: 'tabscrollermenu',

menuPrefixText:'菜单',// 菜单前缀文本

maxText: 15,// 菜单文本字符长度

pageSize: 10// 每10页一组

})],

items:[{

title:'我的主页',

//closable:true,//是否可关闭

contentEl:'homePage'

}]

}); 效果如下

0818b9ca8b590ca3270a3433284dd417.png

(12)Extjs4.2.1 tabpanel 右键关闭插件,右键关闭当前失效,关闭其他会关闭所有的BUG

在ExtJs4.2.1版本中的右键关闭插件

TabCloseMenu.js会有bug, 4.1好像没问题, 在firebug中调试会有以下错误 如图

0818b9ca8b590ca3270a3433284dd417.png

使用右键关闭的插件的方法如下:

var pnCenter=new Ext.TabPanel({

id: 'pnCenter',

region:'center',

activeTab:0,

enableTabScroll : true, // 是否允许存在滚动条

deferredRender : false,

plugins: [Ext.create('Ext.ux.TabCloseMenu', { //这里参加右键封闭插件

ptype: "tabscrollermenu",

maxText: 15,

pageSize: 5,

closeTabText: '关闭当前',

closeOthersTabsText: '关闭其他界面',

closeAllTabsText: '关闭所有'

})],

plugins: [Ext.create('Ext.ux.TabScrollerMenu', {// 溢出选项卡插件

ptype: 'tabscrollermenu',

menuPrefixText:'菜单',// 菜单前缀文本

maxText: 15,// 菜单文本字符长度

pageSize: 10// 每10页一组

}),Ext.create('Ext.ux.TabCloseMenu', { //这里参加右键关闭插件

closeTabText: '关闭当前',

closeOthersTabsText: '关闭其他界面',

closeAllTabsText: '关闭所有'

})

],

items:[{

title:'我的主页',

contentEl:'homePage'

}]

});

这里解决方法是将下面的代码替换系统自带的插件

TabCloseMenu.js即可

/**

* Plugin for adding a close context menu to tabs. Note that the menu respects

* the closable configuration on the tab. As such, commands like remove others

* and remove all will not remove items that are not closable.

*/

Ext.define('Ext.ux.TabCloseMenu', {

alias: 'plugin.tabclosemenu',

mixins: {

observable: 'Ext.util.Observable'

},

/**

* @cfg {String} closeTabText

* The text for closing the current tab.

*/

closeTabText: 'Close Tab',

showCloseOthers: true,

closeOthersTabsText: 'Close Other Tabs',

/**

* @cfg {Boolean} showCloseAll

* Indicates whether to show the 'Close All' option.

*/

showCloseAll: true,

closeAllTabsText: 'Close All Tabs',

/**

* @cfg {Array} extraItemsHead

* An array of additional context menu items to add to the front of the context menu.

*/

extraItemsHead: null,

/**

* @cfg {Array} extraItemsTail

* An array of additional context menu items to add to the end of the context menu.

*/

extraItemsTail: null,

//public

constructor: function (config) {

this.addEvents(

'aftermenu',

'beforemenu');

this.mixins.observable.constructor.call(this, config);

},

init : function(tabpanel){

this.tabPanel = tabpanel;

this.tabBar = tabpanel.down("tabbar");

this.mon(this.tabPanel, {

scope: this,

afterlayout: this.onAfterLayout,

single: true

});

},

onAfterLayout: function() {

this.mon(this.tabBar.el, {

scope: this,

contextmenu: this.onContextMenu,

delegate: '.x-tab'

});

},

onBeforeDestroy : function(){

Ext.destroy(this.menu);

this.callParent(arguments);

},

// private

onContextMenu : function(event, target){

var me = this,

menu = me.createMenu(),

disableAll = true,

disableOthers = true,

tab = me.tabBar.getChildByElement(target),

index = me.tabBar.items.indexOf(tab);

this.item = me.tabPanel.getComponent(index);

me.selectedTab = me.tabPanel.getComponent(index);

menu.child('*[text="' + me.closeTabText + '"]').setDisabled(!me.item.closable);

if (me.showCloseAll || me.showCloseOthers) {

me.tabPanel.items.each(function(item) {

if (item.closable) {

disableAll = false;

if (item != me.item) {

disableOthers = false;

return false;

}

}

return true;

});

if (me.showCloseAll) {

menu.child('*[text="' + me.closeAllTabsText + '"]').setDisabled(disableAll);

}

if (me.showCloseOthers) {

menu.child('*[text="' + me.closeOthersTabsText + '"]').setDisabled(disableOthers);

}

}

event.preventDefault();

me.fireEvent('beforemenu', menu, me.item, me);

menu.showAt(event.getXY());

},

createMenu : function() {

var me = this;

if (!me.menu) {

var items = [{

text: me.closeTabText,

scope: me,

handler: me.onClose

}];

if (me.showCloseAll || me.showCloseOthers) {

items.push('-');

}

if (me.showCloseOthers) {

items.push({

text: me.closeOthersTabsText,

scope: me,

handler: me.onCloseOthers

});

}

if (me.showCloseAll) {

items.push({

text: me.closeAllTabsText,

scope: me,

handler: me.onCloseAll

});

}

if (me.extraItemsHead) {

items = me.extraItemsHead.concat(items);

}

if (me.extraItemsTail) {

items = items.concat(me.extraItemsTail);

}

me.menu = Ext.create('Ext.menu.Menu', {

items: items,

listeners: {

hide: me.onHideMenu,

scope: me

}

});

}

return me.menu;

},

onHideMenu: function () {

var me = this;

me.item = null;

me.fireEvent('aftermenu', me.menu, me);

},

onClose : function(){

this.tabPanel.remove(this.selectedTab);

},

onCloseOthers : function(){

this.doClose(true);

},

onCloseAll : function(){

this.doClose(false);

},

doClose : function(excludeActive){

var items = [];

this.tabPanel.items.each(function(item){

if(item.closable){

if(!excludeActive || item != this.selectedTab){

items.push(item);

}

}

}, this);

Ext.each(items, function(item){

this.tabPanel.remove(item);

}, this);

}

});

(13).........

以上总结,不断更新,请大家关注

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

weixin_39591386

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值