我用ExtJs做了个框架，大家看看怎么样

[erplab]

本人利用业余时间花了两个月时间，利用早期版本的ExtJs和 WebService 整理了一个框架，扩展了一些界面功能 ，大家看看那

www.erpbox.cn

用户名/密码 admin/aaa

有愿意合作的可以联系QQ 316672999


主要包括了：
业务功能上：
1.完善的权限系统
2.一个简单的进销存（还在完善中）
3.强大的界面组件
（1）标准的单据（多表头、多分录）界面Javascript类
（2）扩展了ExtJs的DataStore类，增加了行状态管理
（3）界面上的关键界面逻辑实现了序列化
（4）实现了各种字典的基类，左树右卡、左表右卡，树表卡联动字典、树表Tab、树表Form字典等。。
（5）标准的单据管理、单据参照基类
。。。。。

适合做大型ERP的底层平台和展现平台。

[erplab]

我想做成一个快速开发平台，把一些基本的界面逻辑封装起来，目前这些都已经实现了
用我现在这个框架做一个单据的代码如下 ：

//InvoiceBill.js
AppBox.Bill.SalInvoice = Compasslab.AppBox.prototype=
{

//调用的WebService，目前我使用的是.net的ScriptService

InvokeConfig:
{
baseUrl:'../AppBus/Sal/Invoice/InvoiceService.asmx',
detail:{method:'GetABill',params:'{"billId":"@ID@"}'}, //根据ID得到单据的方法
save:{method:'SaveBill',paramName:'billInfo'}//保存单据的方法

},

/*
//也可以使用asp,php做服务端，写法如下
InvokeConfig:
{
//Proxy:'Sal100' 表示在权限系统中的功能权限码，
//在权限系统中预制这个码的URL即可实现集成(授权管理等)
detail:{proxy:'Sal100'},
save:{proxy:'Sal1x0'}
},
*/

//单据数据集信息
StoreBuilder:[{
recordName:'Invoice',mappingId:'TRANSID',mappingCode:'TRANSNUM',
schema: ['TRANSID','CORPID','TRANSNUM','TRANSDATE','TRANSCLASS','TRANSTYPE','TRANSTYPECODE','TRANSTYPENAME',
'CUSTOMERCODE','CUSTOMERNAME','TRANSTOCODE', 'TRANSTONAME','CUSTOMER','BILLTO','PAYER','TRANSTO',
'BILLTOCODE', 'BILLTONAME','PAYERCODE','PAYERNAME','CURRENCY','CURRENCYCODE','CURRENCYNAME','EXCHGRATE','MEMO','CREATOR','CREATETIME','STATUS','APPROVALID']
},{
recordName:'InvoiceItem',mappingId:'DETAILID',
schema: ['TRANSID','DETAILID','MATERIALID','MATERIALCODE','MATERIALNAME','TAXRATE','ORIGINALPRICE','QTY','PRICE','ORGEXCLUSVAMT','ORGTAXAMT',
'ORGAMT','EXCLUSVAMT','TAXAMT','AMT','MEMO','BATCHNUM']
}],


// 基本信息TAB页，实现了配置式的开发，从繁琐的页面设计中解脱出来
baseHeader:[ {xtype:'hidden',cellConfig:{colspan:3},fieldLabel: 'CORPID',width:300,name: 'CORPID'},

{xtype:'hidden',cellConfig:{colspan:3},fieldLabel: 'TRANSID',width:300,name: 'TRANSID'},

{
xtype:"combo",fieldLabel:'业务分类',width:'150',emptyText:'', blankText:'请选择',editable:false,forceSelection:true,triggerAction:'all',
store:new Ext.data.SimpleStore({fields: ["retrunValue", "displayText"],data: [[1,'到货'],[2,'退货']],sortInfo:{field:'retrunValue'}}),
valueField :"retrunValue",displayField: "displayText",mode: 'local',hiddenName:'TRANSCLASS',allowBlank:false,name:'_stransclass'
},

{xtype:'helpfield', fieldLabel: '业务类型',width:165,name: 'TRANSTYPENAME',allowBlank: false,oidName:'TRANSTYPE',
codeName:'TRANSTYPECODE', helpConfig:{helpName:'M_TRANSTYPE',helpCode:'001'}},


{xtype:'textfield', fieldLabel: '发票编号',width:165,name: 'TRANSNUM',readOnly :true},

{xtype:'datefield', fieldLabel: '发票日期',width:165,name: 'TRANSDATE',allowBlank: false},

{xtype:'helpfield', fieldLabel: '售达客户',width:165,name:'CUSTOMERNAME', oidName:'CUSTOMERID',
codeName:'CUSTOMERCODE', helpConfig:{helpName:'M_COMPANYPARTNER',helpCode:'001',onAfterHelp:function(e){AppBox.Bill.SalDelivery.headerHelp(e);}}},

{xtype:'helpfield', fieldLabel: '收票客户',width:165,name:'BILLTONAME', oidName:'BILLTO',
codeName:'BILLTOCODE', helpConfig:{helpName:'M_COMPANYPARTNER',helpCode:'001'}},

{xtype:'helpfield', fieldLabel: '付款客户',width:165,name:'PAYERNAME', oidName:'PAYER',
codeName:'PAYERCODE', helpConfig:{helpName:'M_COMPANYPARTNER',helpCode:'001'}},

{xtype:'helpfield', fieldLabel: '送达客户',width:165,name:'TRANSTONAME', oidName:'TRANSTO',
codeName:'TRANSTOCODE', helpConfig:{helpName:'M_COMPANYPARTNER',helpCode:'001'}},

{xtype:'helpfield', fieldLabel: '货币',width:165,name: 'CCNAME', oidName:'CURRENCY',
codeName:'CCCODE', helpConfig:{helpName:'M_CURRENCY',helpCode:'001'}},

{xtype:'numberfield', fieldLabel: '汇率',width:165,name: 'EXCHGRATE'},

{xtype:'textfield', fieldLabel: '备注',width:165,name: 'MEMO'}
],

// 单据页脚
footer:[
{xtype:'textfield', fieldLabel: '制单人', width:165,name: 'CREATOR',disabled:true},

{xtype:'textfield', fieldLabel: '最后修改时间', width:165,name: 'CREATETIME',disabled:true},

{
xtype:"combo",fieldLabel:'状态', width:165,emptyText:'制单', blankText:'制单',editable:false,forceSelection:true,triggerAction:'all',
qtip:'设置是否可用',
store:new Ext.data.SimpleStore({fields: ["retrunValue", "displayText"],data: [[0,'制单'],[2,'审批中'],[1,'审核通过']],sortInfo:{field:'retrunValue'}}),
valueField :"retrunValue",displayField: "displayText",mode: 'local',hiddenName:'STATUS',allowBlank:false,name:'_status',disabled:true
}
],

[erplab]

// Grid配置
GridBuilder:function(){
return { colModel:[ new Ext.grid.RowNumberer(),

{header: "物料",width:150,dataIndex:"MATERIALNAME",editor: new AppBox.WebControl.HelpField({name: 'MATERIALNAME', oidName:'MATERIALID',
codeName:'MATERIALCODE', helpConfig:{helpName:'M_MATERIALS',helpCode:'001'}})},

{header: "批次号",width:120,dataIndex:"BATCHNUM",editor: new Ext.form.NumberField({allowBlank: false})},
{header: "开票数量",width:120,dataIndex:"QTY",align:'right',renderer:xBridge.Utils.numRenderer,editor: new Ext.form.NumberField({allowBlank: false})},
{header: "开票单价",width:120,dataIndex:"PRICE",align:'right',renderer:xBridge.Utils.numRenderer,editor: new Ext.form.NumberField({allowBlank: false})},
{header: "不含税金额",width:120,dataIndex:"EXCLUSVAMT",align:'right',renderer: xBridge.Utils.cnMoney,editor:new Ext.form.NumberField({allowBlank: false})},
{header: "税率 %",width:120,dataIndex:"TAXRATE",align:'right',renderer:xBridge.Utils.percentage,editor:new Ext.form.NumberField({allowBlank: false})},
{header: "税额",width:120,dataIndex:"TAXAMT",align:'right',renderer: xBridge.Utils.cnMoney,editor:new Ext.form.NumberField({allowBlank: false})},
{header: "含税金额",width:120,dataIndex:"AMT",align:'right',renderer: xBridge.Utils.cnMoney,editor:new Ext.form.NumberField({allowBlank: false})},
{header: "到货单号",width:120,dataIndex:"ARRIVALID",editor:new Ext.form.TextField({})},
{header: "到货单分录号",width:120,dataIndex:"ARRIVALDTLID",editor:new Ext.form.TextField({})},
{header: "备注",width:150,dataIndex:"MEMO",editor: new Ext.form.TextField({})}
]

}
},


//入口函数 ，在AppBox系统中，init是所有页面的初始入口函数，系统会根据这个入口函数自动初始化单据、字典等的界面
init: function(x) {





x= x || {billid:'',opflag:0};

var _this=AppBox.Bill.SalInvoice;
var o = Ext.getCmp('SalInvoicePanel');
if(!o)
{
var baseHeader = xBridge.FormatPanel('基本信息',3,_this.baseHeader,140);//xBridge.FormatPanel方法 实现Table布局
var footer = xBridge.FormatPanel('_',3,_this.footer,30);

o=new WebControl.BillSheet({
id:'SalInvoicePanel',
billid:x.billid,
opflag:x.opflag,
title:'销售发票',
renderTo:document.body,
invokeConfig:_this.InvokeConfig,
headerHeight:180,
storeBuilder:_this.StoreBuilder,
eventHandler:{setDefaultValue:_this.SetDefaultValue, gridHelp:_this.gridHelp},//初值、单元格计算的事件代理
gridBuilder: _this.GridBuilder(),
headerItems:[baseHeader],//单据表头信息，每个变量一个TAB页面
footerItems:[footer]
});



}
return o;

}
};

[erplab]

//单据基类中暴露出来的事件接口 ，实现了单元格中复杂逻辑的处理，实际开发中，这类逻辑就相当简单了
// 在init函数中 通过 设置 eventHandler:{setDefaultValue:_this.SetDefaultValue, gridHelp:_this.gridHelp} 实现关联
/*
e 的说明
grid - 当前 grid
gridIndex - 多表体时，当前Grid 在Tab页中的位置 ,默认0
record - 当前操作的记录
field - 当前操作的字段
value - 要赋的值
originalValue - 赋值前的值.
row - 当前操作的行
column - 当前操作的列
cancel - 是否取消编辑.


用于行内计算，单元格帮助后的赋值等 这样就很强大的Grid了
*/
AppBox.Bill.SalInvoice.gridHelp=function(e)
{

switch(e.field)
{
case 'QTY'://数量乘以单价 得到金额
e.record.set('AMT', (e.value*parseFloat(e.record.get('QTY'))).toFixed(2));
e.record.set('TAXAMT', (e.value*parseFloat(e.record.get('QTY'))).toFixed(2));
break;

case 'PRICE':
e.record.set('TAXAMT', (e.value*parseFloat(e.record.get('QTY'))).toFixed(2));
break;

case 'AMT': //反算数量/价格，默认反算数量
var price = parseFloat(e.record.get('PRICE')).toFixed(2);
var qty = parseFloat(e.record.get('QTY')).toFixed(2);
if( price==0 && qty==0) {e.value=0;break;}
if(price==0) {e.record.set('PRICE', (e.value/parseFloat(e.record.get('QTY'))).toFixed(2)); break;}
e.record.set('QTY', (e.value/parseFloat(e.record.get('PRICE'))).toFixed(2));
break;

}


};
//新增行时初始数据，赋初值
AppBox.Bill.SalInvoice.SetDefaultValue=function(field,storeIndex)
{
switch(storeIndex)
{
case 0://表头记录
field['CREATOR']='王兴华';
// field['CREATETIME']=new Date(Date.parse('10/15/2006'));
field['STATUS']='0';
field['TRANSCLASS']=1;
field['EXCHGRATE']=1;
break;

case 1://第一个Grid绑定的数据
field['TAXRATE']=0;
field['ORIGINALPRICE']=0;
field['QTY']=0;
field['PRICE']=0;
field['ORGEXCLUSVAMT']=0;
field['ORGTAXAMT']=0;
field['ORGAMT']=0;
field['EXCLUSVAMT']=0;
field['TAXAMT']=0;
field['AMT']=0;
break;
}

};

[erplab]

大体加了些注释，呵呵，总体来说就是为了快速开发，通过配置式的代码，实现界面逻辑。

[erplab]

//入口函数 ，在AppBox系统中，init是所有页面的初始入口函数，系统会根据这个入口函数自动初始化单据、字典等的界面
init: function(x) {





x= x || {billid:'',opflag:0};

var _this=AppBox.Bill.SalInvoice;
var o = Ext.getCmp('SalInvoicePanel');
if(!o)
{
var baseHeader = xBridge.FormatPanel('基本信息',3,_this.baseHeader,140);//xBridge.FormatPanel方法 实现Table布局
var footer = xBridge.FormatPanel('_',3,_this.footer,30);

o=new WebControl.BillSheet({ /*WebControl.BillSheet 是单据基类*/ id:'SalInvoicePanel',
billid:x.billid,
opflag:x.opflag,
title:'销售发票',
renderTo:document.body,
invokeConfig:_this.InvokeConfig,
headerHeight:180,
storeBuilder:_this.StoreBuilder,
eventHandler:{setDefaultValue:_this.SetDefaultValue, gridHelp:_this.gridHelp},//初值、单元格计算的事件代理
gridBuilder: _this.GridBuilder(),
headerItems:[baseHeader],//单据表头信息，每个变量一个TAB页面
footerItems:[footer]
});



}
return o;

}
};

[erplab]

{xtype:'helpfield', fieldLabel: '送达客户',width:165,name:'TRANSTONAME', oidName:'TRANSTO',
codeName:'TRANSTOCODE', helpConfig:{helpName:'M_COMPANYPARTNER',helpCode:'001'}},

这是 右键帮助框（也可以点击那个带放大镜的按钮），这样配置helpConfig就实现了弹出帮助列表的功能， 这是弹出一个往来单位的帮助

这个HelpField实现了 编号 名称 之间的自动转换，鼠标进入时显示编号，挪开时显示名称，实际保存时保存ID

[erplab]

[Quote=引用 32 楼 laizt 的回复:]
最好能提供Source Code!
[/Quote]

我还在完善，等完善后 择机开源

[erplab]

[Quote=引用 22 楼 aday 的回复:]
感觉还不错，起码用的是autoLoad方式，而不是iframe方式，值得学习。

有几点提一下：
1、没有使用loadMask的载入处理，loadMask可以让打开页面更直观。
2、切换主体部分的TabPanel没有和菜单想对应
3、没有监控窗口大小变化和TabPanel的tabchange事件，导致页面会出现局部看不见
4、表格内回车不是往后走，而是往下走

另外想请教个问题，autoload载入的页面中，怎么通过回调函数载入js，然后调用js的函数？
[/Quote]

js是解释型的，从前到后一步步解释的

通过文本流把脚本内容加载到客户端后，要进行解释 使用 eval() 方法

[erplab]

[Quote=引用 22 楼 aday 的回复:]
感觉还不错，起码用的是autoLoad方式，而不是iframe方式，值得学习。

有几点提一下：
1、没有使用loadMask的载入处理，loadMask可以让打开页面更直观。
2、切换主体部分的TabPanel没有和菜单想对应
3、没有监控窗口大小变化和TabPanel的tabchange事件，导致页面会出现局部看不见
4、表格内回车不是往后走，而是往下走

另外想请教个问题，autoload载入的页面中，怎么通过回调函数载入js，然后调用js的函数？
[/Quote]

js是解释型的，从前到后一步步解释的

通过文本流把脚本内容加载到客户端后，要进行解释 使用 eval() 方法

2.3 我测试没问题 1 4 我再完善

[kawensong]

ding

[幻影时空]

呵呵, 继续学习,研究~~

[alongsir]

做的不错 啊，，，很有专研精神噢

[yzqlee]

比我要死要活用jquery做出来的效果要好很多,
Ext确实很强大.
不过也需要用的好才行,
楼主非常不错`

[xeqtr1982]

楼主很强，佩服。最近也在弄Extjs.向你学习。。

[abcn]

很好，隻是速度太慢了，是不是所有的extjs櫃架都是這樣，如果能解決速度的問題，這將是一個非常不錯的東東！

[wgdmhz]

d

[wangjunwei1985]

很好 我现在也正在用 ext 开发一个系统 有空讨论一下 qq：315838691 skype：wjw10015039

[答疑-定制-运维找我]

为何我访问不上了.???

[嘉木桐]

我怎么打不开网址啊？

[mvp2000]

打不开网址了