Category Archives: ExtJS

[ExtJS]4.0.7版本中panel卷起后无法看到按钮效果

这个目前在官方还没到有任何反应. 当一个带有collapse属性的panel作为hbox样式panel时, 就会发生此问题

mainPanel = Ext.create("Ext.panel.Panel", {
	height: 800,
        width: 700,
	autoHeight: true,
	autoScroll: true,
	border: false,
	layout: {
		type: "hbox",
		columns: 2,
		align: 'stretch'
	},
})
leftPanel = Ext.create("Ext.panel.Panel", {
	frame: true,
	lookMask: true,
	collapsible: true,
	collapseDirection: Ext.Component.DIRECTION_LEFT,
	width: 230,
        height: 400,
	border: 0,
	useArrow: true,
	title: "产品分类",
	split: true,
	tbar: [
	      {
		xtype: "button",
		text: "全部卷起"
              }]
});
mainPanel.add(leftPanel)
mainPanel.doLayout()

这个时候点击卷起的话. 那个卷起按钮会不显示. 在4.0.7版本之前没这个问题.

经排查 问题在于reExpander没用设置height,top, left这三个style属性. 更确切的说, 这个panel原本会向上查找height. 但是4.0.7严格的检查.高度无法正确获取到. 因此这个时候的高度为0. 所以看到缩起来后的按钮以及文字.
这个时候我们在leftPanel上增加一个监听事件. 手动向reExpander设置style属性.

leftPanel.addListener({
	collapse: function(p){
		if (p && p.collapsed && p.reExpander){
			var reExpander = p.reExpander;
			setTimeout(function(){
				reExpander.el.applyStyles({top: 0, left: 0});
				reExpander.setHeight(me.getHeight())
			}, 50);
		}
	}
})

这个时候 卷起来已经可以正常看到按钮以及文字了.

Ext4中DataStore以及Model需要注意的几点

最近使用ExtJS在做项目, 其中grid会大量的使用Model以及Data.Store.平常使用是没有问题的, 如果做高级搜索的时候, 按照一般情况下, 当然时重建model以及data.store, 就是按以上的思路来做的, 起初的几次, 也没什么问题. 但是使用多次高级搜索之后, 就会报一个this model is undefined错误.
遍历整个代码, model每次都会赋值, 为什么还会是undefined? Google搜索之, 也没找到任何原因.
今天, 重新看Ext文档的时候, 发现了Data.Store的setProxy方法, proxy是用于将搜索条件以及调用函数储存起来, 然后extjs内部会去读取这个object.生成你想要的数据.
目前我已经高级搜索的方法都改成store.setProxy(object); store.loadPage(1); 目前用户测试反馈下来, 无报错..