快速开发平台WebBuilder中ExtJS表格的增删改查

使用WebBuilder可实现表格的自动增删改查功能,而无需编写前台脚本和后台SQL。
WebBuilder开源项目地址:http://www.putdb.com
自动生成的页面:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Putdb WebBuilder</title>
<script type="text/javascript" src="webbuilder/script/locale/wb-lang-zh_CN.js"></script>
<script type="text/javascript" src="webbuilder/script/welcome.js"></script>
<link rel="stylesheet" href="webbuilder/controls/ext/resources/css/ext-all.css" type="text/css">
<link rel="stylesheet" href="webbuilder/css/style.css" type="text/css">
<script type="text/javascript" src="webbuilder/controls/ext/ext-all.js"></script>
<script type="text/javascript" src="webbuilder/controls/ext/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="webbuilder/script/wb.js"></script>
<script type="text/javascript" src="webbuilder/script/portal.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
Ext.onReady(function(){
Wb.initialize(null,480);
Pt.indexPath=" 13LRIOHKYMUT ide";
Wd.desktopData=null;
Pt.initialize();
Wd.moduleStore=new Ext.data.TreeStore({
sorters:{property:'ORDER_INDEX'},proxy:{type:"ajax",url:"main?xwl=13LTWX2EDCP6",listeners:{exception:function(proxy,response,operation,options){
Wb.except(response.responseText);
}}},fields:[{name:'text'},{name:'iconCls'},{name:'MODULE_ID'},{name:'PARENT_ID'},{name:'ORDER_INDEX'},{name:'IS_FOLDER'},{name:'NEW_WIN'}],params:{},listeners:{beforeload:function(store,operation,options){
Wb.setStore(store);
operation.params.parentId=operation.node.get('MODULE_ID');
},load:function(store,node,records,successful,options){
if(successful){
if(!Wd.pathInited){
Wd.pathInited=true;
if(Pt.indexPath.length<2)Wb.selFirst(moduleTree);
else moduleTree.selectPath(Pt.indexPath,'MODULE_ID',' ');
}
}
}}
});
Wd.saveDesktop={request:function(p){Wb.request(saveDesktop,p)},url:"main?xwl=13NPCFVS59ZT",params:{},beforerequest:function(ajax){
ajax.params.data=Pt.getDesktop();
}};
Wd.moduleTool=new Ext.toolbar.Toolbar({
id:"moduleTool",items:[
{id:"blankBtn",xtype:"tbspacer"
}
,{id:"titleLabel",text:"Putdb WebBuilder 6.5",xtype:"label",style:"text-shadow:0 -1px 1px #FFFFFF;"
}
,{id:"blankSt",10,xtype:"tbspacer"
}
,{id:"userBtn",iconCls:"user_icon",text:"Administrator",listeners:{click:function(item,event,options){
Wb.open('main?xwl=account',Str.myAccount,'user_icon');
}}
}
,{id:"regBtn",tooltip:Str.productRegister,hidden:false,text:"<font color='#FF0000'>注册</font>",listeners:{click:function(item,event,options){
Wb.open('main?xwl=register',Str.productRegister,'key_icon');
 
}}
}
,{id:"spaceBtn",xtype:"tbfill"
}
,{id:"backBtn",iconCls:"prior_icon",tooltip:Str.back,xtype:"splitbutton",listeners:{arrowclick:function(item,event,options){
Wb.showNavMenu(backBtn,forwardBtn,true);
},click:function(item,event,options){
Wb.navBack(backBtn,forwardBtn);
}}
}
,{id:"forwardBtn",iconCls:"next_icon",tooltip:Str.forward,xtype:"splitbutton",listeners:{arrowclick:function(item,event,options){
Wb.showNavMenu(forwardBtn,backBtn,false);
},click:function(item,event,options){
Wb.navFwd(backBtn,forwardBtn);
}}
}
,{id:"closeBtn",iconCls:"close_icon",tooltip:Str.closeAll,xtype:"splitbutton",listeners:{click:function(item,event,options){
Pt.close(true);
}},menu:{xtype:"menu",items:[
{id:"closeOthersItem",text:Str.closeOthers,listeners:{click:function(item,event,options){
Pt.close(false);
}}
}
]}}
,{id:"toggleBtn",iconCls:"align_icon",tooltip:Str.toggleAppList,listeners:{click:function(item,event,options){
moduleTree.setVisible(!moduleTree.isVisible());
}}
}
,{id:"homeBtn",iconCls:"home_icon",tooltip:Str.homePage,listeners:{click:function(item,event,options){
moduleTab.setActiveTab(homePage);
}}
}
,{id:"saveBtn",iconCls:"save_icon",tooltip:Str.saveDesktop,listeners:{click:function(item,event,options){
saveDesktop.request();
}}
}
,{id:"divItem2",xtype:"tbseparator"
}
,{id:"refreshPageBtn",iconCls:"refresh_icon",tooltip:Str.refreshPage,listeners:{click:function(item,event,options){
Pt.refresh();
}}
}
,{id:"refreshModuleBtn",iconCls:"ajax_icon",tooltip:Str.refreshModule,listeners:{click:function(item,event,options){
Wb.refresh(moduleTree,'MODULE_ID');
}}
}
,{id:"divItem3",xtype:"tbseparator"
}
,{id:"logoutBtn",iconCls:"logout_icon",tooltip:Str.logout,listeners:{click:function(item,event,options){
Pt.logout();
}}
}
]});
Wd.viewport=new Ext.container.Viewport({
id:"viewport",layout:"fit",items:[
{id:"mainPanel",tbar:moduleTool,layout:"border",xtype:"panel",items:[
{rootVisible:false,id:"moduleTree",region:"west",animate:false,store:moduleStore,220,split:true,viewConfig:Pt.viewConfig(),xtype:"treepanel",listeners:{itemclick:function(view,record,item,index,event,options){
Pt.run(record);
},itemmousedown:function(view,record,item,index,event,options){
Wb.setDDText(view,record.get('text'));
}}
}
,{id:"moduleTab",region:"center",deferredRender:false,xtype:"tabpanel",plugins:{ptype:"tabscrollermenu"},listeners:{afterrender:function(tab,options){
tab.mon(tab.tabBar,'dblclick',Pt.monDbClick,tab);
},tabchange:function(tab,newCard,oldCard,options){
Pt.moduleTabChange(tab,newCard,oldCard,options);
Wb.recNav(newCard,oldCard,backBtn);
}},items:[
{id:"homePage",title:Str.homePage,autoScroll:true,layout:"absolute",hideMode:"offsets",iconCls:"home_icon",xtype:"panel",listeners:{afterrender:function(panel,options){
Pt.ddSupport(panel);
}}
}
]}
]}
]});
Pt.finalize();
});
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/webbuilder/p/extjs-gridpanel-crud.html