Extjs 项目中常用的小技巧

1.extjs 给怎么给panel设背景色

设置bodyStyle:'background:#ffc;padding:10px;',

var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Results',
width: 600,
height: 400,
renderTo: Ext.getBody(),
bodyStyle: 'background:#ffc; padding:10px;',
layout: {
type: 'vbox',       // Arrange child items vertically
align: 'stretch',    // Each takes up full width
padding: 5
},
items: [{               // Results grid specified as a config object with an xtype of 'grid'
xtype: 'grid',
columns: [{header: 'Column One'}],            // One header just for show. There's no data,
store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
flex: 1                                       // Use 1/3 of Container's height (hint to Box layout)
}, {
xtype: 'splitter'   // A splitter between the two child items
}, {                    // Details Panel specified as a config object (no xtype defaults to 'panel').
title: 'Details',
bodyPadding: 10,
items: [{
fieldLabel: 'Data item',
xtype: 'textfield'
}], // An array of form fields
flex: 2             // Use 2/3 of Container's height (hint to Box layout)
}]
});

2. Extjs4.0 设置 Ext.data.Store 传参的请求方式

 

var Store = Ext.create('Ext.data.Store', {
pageSize: pageSize,
model: 'Ext.data.Model名称',
autoLoad: false,
proxy: {
type: 'ajax',
url: '请求路径',
getMethod: function(){ return 'POST'; },//亮点，设置请求方式,默认为GET
reader: {
type: 'json',
root: 'Data',
totalProperty: 'totalCount'
}
},
listeners: {
'beforeload': function (store, op, options) {
var params = {
//参数
};
Ext.apply(store.proxy.extraParams, params);
}
}
});

 

3.ExtJS grid 带参数查询分页 store 传额外参数解决办法

 

在store的beforeload事件里面重写store.proxy.extraParams，添加新参数

 

就不必每次都手动的添加参数

 

store.on('beforeload', function (store, options) {
var new_params = { name: Ext.getCmp('search').getValue() };
Ext.apply(store.proxy.extraParams, new_params);
// alert('beforeload');
});
在Extjs3 中的
store.on('beforeload', function () {
store.baseParams = {
name: '5555555',
intss: '666666666'
};
});

下面给出完整的代码。原理很简单，将搜索条件放在store的baseParams中，每次加载都赋值。

只是需要强制赋值，因为默认的pagetoolbar只会把start、limit、page、sort、dir传递给store。

var store = new Ext.data.Store({
pageSize: GridPageSize,
model: 'Master',
autoLoad: false,
proxy: {
type: 'ajax',
url: '/master/GetMasterData',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
},
fields: [
{ name: 'Id' },
{ name: 'Master_Name' }

//排序
sorters: [{
property: 'Master_Name',
direction: 'DESC'
}]

});
store.on('beforeload', function (store, options) {
var new_params = { name: Ext.getCmp('search').getValue() };
Ext.apply(store.proxy.extraParams, new_params);
// alert('beforeload');
});
store.load({
params: { start: 0, limit: GridPageSize }
})

4.如何让你的window显示在最顶层

var win = new top.Ext.Window({
                title:'',
                width:1000,
                height:700,
                layout:'fit',
                plain:true,
                closeAction:'hide',
                model:true,
                items:mypanel
            });

5.Extjs可修改列表格点击复选框时报错问题：Uncaught TypeError: Object [object Object] has no method 'getEditor'

解决方法：

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners : {
"edit" : function() {
},
"beforeedit" : function(obj,opt) {
if(obj.column && obj.column.isCheckerHd) {
return false;
}
}
}