Extjs 4.0.7 中经验总结（--持续更新）
1、treepanel 的动态加载
var treeStore1 = Ext.create('Ext.data.TreeStore', {
autoLoad : true,
proxy: {
type: 'ajax',
url: 'ashx/GetErptreeJson.ashx' //指名该连接即可，系统会自动加上'ashx/GetErptreeJson.ashx？node='01' 参数，只要在该网页中处理即可。
},
root: {
nodeType: 'async',
text: 'Erp管理菜单',
id: '00', //指名首次node参数为‘00’，既ashx/GetErptreeJson.ashx？node='00'
expanded: true
}
});
json 格式：
[{id:'01-02-01',text:'testform1',qtip:'js/xxx.js',qtitle:'xxx.js',url:'xxx.htm',leaf:true},{id:'01-02-01',text:'testform1',qtip:'js/xxx.js',qtitle:'xxx.js',url:'xxx.htm',leaf:true}]
2、viewreport 中 center Tab页中GridPanel 宽度没有自动适应解决
var grid = Ext.create('Ext.grid.Panel', {
store: 'DataStore', //'DataStore',JsonStore
selModel: sm, //---checkbox 模式
collapsible: false,
iconCls: 'icon-grid',
frame: true, //显示Grid整个框架
height: 700,
region:'center', //指定该参数即可
。。。。
3、GridPanel 显示json数据格式
Ext.define('MyData', {
extend: 'Ext.data.Model',
fields: [{ name: 'FormID',type: 'string'} //指明 int类型 ，在排序时将按数字大小排序
, 'FormName'
, { name: 'FormCode', type: 'string' }
, { name: 'WebPath', type: 'string' }
]
});
var mystore = Ext.create('Ext.data.Store', {
storeId: 'DataStore',
pageSize: 50,
autoLoad: true,
model: 'MyData',
sorters: ['FormID'], //['FormID', 'FormName'],
sortInfo: { field: 'FormID', direction: "DESC" },
proxy: {
type: 'ajax',
url: 'ashx/system/Comm_Grant_FormJson.ashx', //'../ashx/TestJobData.ashx','TestJsonData.json', 'JobData.json' //'GetExtjsData.aspx?parm=List',
reader: {
type: 'json',
root: 'data', //重点要指明实际数据的对象
id: "FormID",
totalProperty: 'totalCount'
}
}
});
json文件格式：
{totalCount:30,success:true,error:"",singleInfo:"",data:[{"FormID":"01","FormName":"【物料管理】","FormCode":"","WebPath":""},{"FormID":"01-01","FormName":"〖基本资料〗","FormCode":"","WebPath":""}]}
4、Grid列锁定
columns: [{
text : 'Company',
locked : true,
width : 200,
sortable : false,
dataIndex: 'company'
}
5、字符串转日期对象函数
日期格式’2012-01-03 12:00:00‘ 或 ’2012-01-03 8:00:00‘
Extjs转日期时需要的其中一种格式为’2012-01-03T12:00:00‘ 或 ’2012-01-03T8:00:00‘,该字串可直接转为日期对象.所以有了以下函数,
由于日期格式中小时位置,SQL返回是有一位或两位,转日期
function StrToDate(_datestr){
var _newdate = _datestr;
if (_newdate.length==18){
_newdate = _newdate.replace(' ','T0');
}
else{
_newdate = _newdate.replace(' ','T');
}
var _dt = new Date(_newdate);
return _dt
}
应用赋值如下:
Docnum_Upd_Form.getForm().findField('UseDate').setValue(StrToDate(_rec.get('UseDate')));
6、数字格式在gridpanel中的简单设置
renderer:Ext.util.Format.numberRenderer('0,000.00'),
保留几位小数和是否用千分位都可以在此设置，但字段类型要int或float类型。
7、改变日期格式、格式化日期
如果json 传过来的日期格式‘2013-05-03 12:01:01’的字符串时，想在接收的时候变为日期型
可以通过定义数据模型时，确定好格式就变成date型
{ name: 'PODate', type: 'date' ,dateFormat:'Y-m-d H:i:s'}
有些格式是这样的：dateFormat:'Y-m-d\\TH:i:s'
gridpanel 外面用 Ext.util.Format.date(new Date(), 'Y-m-d')；
内部用 renderer: Ext.util.Format.DateRender('Y-m-d'),
9、Extjs 的 TextField 后面加上红星标记
var nameField=new Ext.form.TextField({
fieldLabel: 'Name',
allowBlank:false
});
nameField.on('render',addRedStar);
function addRedStar(obj)
{
var font=document.createElement("font");
font.setAttribute("color","red");
var redStar=document.createTextNode('*');
font.appendChild(redStar);
obj.el.dom.parentNode.appendChild(font);
}
10、两种方式给formpanel赋值
1。formpanel数据源和grid相同，使用 Form.getForm().loadRecord(row);则数据便可自动加载在formpanel中对应的控件。
2。formpanel数据源是单独的，则store传入到formpanel页面后，还需要手动将formpanel中的每个控件用value赋值。
11、TextField 不显示框体，只显示下划线样式
fieldDefaults: {
defaultType: "textfield",
labelAlign: 'right',
labelStyle:'color:blue;',
fieldStyle:'background:none; border-right: 0px solid;border-top: 0px solid;border-left: 0px solid;border-bottom: #000000 1px solid;',
labelWidth: 70
},
另外，当下划线和文本框样式如何相互转换：（提示是否编辑状态用）
SetFormValue:function(){
me.getForm().loadRecord(me._TmpRec);
//设置显示项
if ( me._TmpRec.get('ItemType')=='S' ) {
me.getForm().findField('PartDesc').setReadOnly(false);
me.getForm().findField('PartDesc').setFieldStyle('background:white;border-right: #94a9bc 1px solid;border-top: #94a9bc 1px solid;border-left: #94a9bc 1px solid;border-bottom: #94a9bc 1px solid');
}
else{
me.getForm().findField('PartDesc').setReadOnly(true);
me.getForm().findField('PartDesc').setFieldStyle('background:none; border-right: 0px solid;border-top: 0px solid;border-left: 0px solid;border-bottom: #94a9bc 1px solid');
}
}
12、GridPanel 中判断是否有记录选择
1、如果单选请注释掉 //selModel: Ext.create('Ext.selection.CheckboxModel') //---checkbox 模式
2、判断方式：
if ( me.getSelectionModel().hasSelection() ){ //判断是否有选中
var _RecVender = me.getSelectionModel().getSelection()[0]; //获得当前记录
if (PO_Head_Upd_Frm.isHidden()){ //是否当前窗口打开
PO_Head_Add_Frm.items.items[0].getForm().findField('SaleTel').setValue(_RecVender.get('VTel'));
}
else{
PO_Head_Upd_Frm.items.items[0].getForm().findField('SaleTel').setValue(_RecVender.get('VTel'));
}
else{
Ext.Msg.alert('提示','请选择一个项目！');
}
13、根据窗口大小改变 控件的窗体大小
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = '/images/s.gif';
//Ext.Msg.alert('提示信息', '测试！');
//var CurrencyStore1 = new Ext.create('CurrencyStore');
MainFrm.render(Ext.getBody());
//设置初始值
Ext.getCmp('SPC_MainFrm').setWidth(window.innerWidth);
Ext.getCmp('SPC_MainFrm').setHeight(window.innerHeight);
Ext.getCmp('SPC_Grid').setWidth(window.innerWidth-50);
Ext.getCmp('SPC_Grid').setHeight(window.innerHeight-100);
//添加侦听事件
Ext.EventManager.onWindowResize(function(){
//console.log('-------');
MainFrm.setHeight(window.innerHeight);
MainFrm.setWidth(window.innerWidth);
Ext.getCmp('SPC_Grid').setWidth(window.innerWidth-50);
Ext.getCmp('SPC_Grid').setHeight(window.innerHeight-100);
})
setTimeout(function () { Ext.get('loading').remove(); Ext.get('loading-mask').fadeOut({ remove: true }); }, 2000);
})
14、如何该ComboBox设置起始值
前提：
1、autoLoad:true,一定要设置autoLoad的值为true，否则显示的是value 而不是text
2、一定要添加监听事件：comboBox一定要设置id；用setValue方法为其设置选中值的value，对应的就是store中选项！
Ext.define('ST_YMListStore', {
extend: 'Ext.data.Store',
model: 'ST_YMListData',
autoLoad:true,
proxy:{
type:'ajax',
url:'/ashx/erp/stock/St_MainStock_YMList.ashx',
reader:{
type:'json',
root:'data',
id:'YM',
totalProperty:'totalCount'
}
},
listeners :{
load:function(){
Ext.getCmp('FindYM').setValue(this.getAt(0).get('YM'));
}
},
successProperty: 'success' // 后台传输的标识。必须
});
15、补齐位数函数
String.leftPad(val,5,"0");
16、替换函数
var re = new RegExp('---', 'g'); //正则表达式 g代表全局替换
var tmpstr = val.replace(re, '---'); //让字符串中的---显示成红色
return tmpstr;
}
20、学习控件网页
http://try.sencha.com/extjs/4.1.0/