Extjs 动态生成表格

代码 :

本地分页

1.配置MemoryProxy的data属性

Ext.define('app.view.test.region.Form', {
    extend: 'Ext.Panel',
    alias: 'widget.testform',
    modal: true,
    layout: 'border',
    initComponent: function() {
       this.items = [];
       function createGrid() {
           var data = [{
               app_id: '1',
               app_name: 'QQ',
               cete_name: '社交'
           }, {
              app_id: '2',
              app_name: '微信',
              cete_name: '社交'
           }, {
              app_id: '3',
              app_name: 'QQ空间',
              cete_name: '社交'
           }];
          var store = Ext.create('Ext.data.Store', {
              fields: ['name', 'email', 'phone'],
              pageSize: 3, //每页记录数量
              autoLoad: true, //自动加载,需要配置MemoryProxy的data属性,手动经测试无法分页,不知道是不是bugproxy: new Ext.data.MemoryProxy({
              data: data,
              reader: {
                  type: 'json'
              },
              enablePaging: true //是否需要分页})
          });
          var pagingToolbar = new Ext.PagingToolbar({
              store: store,
              displayInfo: true
          }); //分页控件
          var grid = {
              xtype: 'grid',
              width: 500,
              height: 250,
              frame: true,
              title: 'Extjs实现本地分页',
              iconCls: 'icon-grid',
              renderTo: document.body,
              columns: [{
                  header: 'app_id',
                  dataIndex: 'app_id',
                  flex: 1
              }, {
                  header: 'app_name',
                  dataIndex: 'app_name',
                  flex: 1
              }, {
                  header: 'cete_name',
                  dataIndex: 'cete_name',
                  flex: 1
              }],
              store: store,
              bbar: pagingToolbar
           };
           return grid;
        }
        this.items = [{
           region: 'center',
           xtype: 'panel',
           name: 'listpanel',
           split: true,
           autoScroll: true,
           layout: 'anchor',
           defaults: {
               anchor: '100%'
           },
           items: [createGrid()],
        }];
        this.callParent();
    }
});

2.监听chang事件,捕获相关状态进行针对逻辑操作

Ext.define('app.view.test.region.Form', {
    extend: 'Ext.Panel',
    alias: 'widget.testform',
    modal: true,
    layout: 'border',
    initComponent: function() {
       this.items = [];
       function createGrid() {
           var itemsPerPage = 2;
           var store = new Ext.data.Store({       
                fields: [                
                   'app_id',               
                   'app_name',               
                   'cete_name',            
                ],    
                data: [{
                   app_id: '1',
                   app_name: 'QQ',
                   cete_name: '社交'
                }, {
                  app_id: '2',
                  app_name: '微信',
                  cete_name: '社交'
                }, {
                  app_id: '3',
                  app_name: 'QQ空间',
                  cete_name: '社交'
                }];
                store.load({            
                  params: {                
                      start: 0,                
                      limit: itemsPerPage            
                  }       
           });
           var grid = {
                xtype: 'grid',            
                // title: 'Extjs grid 分页',            
                name: 'datagrid',            
                hidden: false,            
                region: 'center',            
                width: '100%',            
                autoScroll: true,            
                store: store,
                columns: [{                
                    header: 'APPID',                
                    dataIndex: 'app_id',                
                    align: 'center',                
                    flex: 1            
                }, {                
                    header: 'APP名称',                
                    dataIndex: 'app_name',                
                    align: 'center',                
                    flex: 1            
                }, {                
                    header: '类目',               
                    dataIndex: 'cete_name',                
                    align: 'center',                
                    flex: 1           
                }],
                dockedItems: [{                
                    xtype: 'pagingtoolbar',                
                    store: store, // GridPanel使用相同的数据源               
                    dock: 'bottom',                
                    displayInfo: true,                
                    listeners: { //根据change事件捕获相关状态进行针对逻辑操作      
                        change: function(me, pageData, eOpts) {     
                            var newData = [{                            
                                app_id: '1',                            
                                app_name: 'QQ',                            
                                cete_name: '社交'                       
                            }, {                            
                                app_id: '2',                            
                                app_name: '微信',                            
                                cete_name: '社交'                        
                            }];                        
                            store.loadData(newData);                        
                            console.log(me); //当前对象                        
                            console.log(pageData.total); //记录的数据集作为服务器返回的总数  
                            console.log(pageData.currentPage); //当前页码                        
                            console.log(pageData.pageCount); //数据的总页数                        
                            console.log(pageData.toRecord); //当前页面的起始记录索引  
                            console.log(pageData.fromRecord); //当前页面的结束记录索引                        
                            console.log(eOpts); //当前函数                    
                        }               
                    }            
                }]
         };
         return grid;
      }
      this.items = [{
         region: 'center',
         xtype: 'panel',
         name: 'listpanel',
         split: true,
         autoScroll: true,
         layout: 'anchor',
         defaults: {
             anchor: '100%'
         },
         items: [createGrid()],
      }];
      this.callParent();
  }
});
{
        xtype: 'grid',
        sortableColumns: false,
        reference: 'grid',
        flex: 1,
        store: 'panoram.Panoram',
        columns: [{
            xtype: 'rownumberer'
        },{
            text: '主键',
            dataIndex: 'id',
            name: 'id',
            id: 'panoramid',
            width: 100
        },{
            text: 'viewUuid',
            dataIndex: 'viewUuid',
            width: 100
        }, {
            text: '缩略图路径',
            dataIndex: 'thumbPath',
            width: 100,
            renderer: function (v) {
                return '<image style="width : 185px; height : 70px;" src="'+v+'" />'
            }
        }, {
            text: '名称',
            dataIndex: 'name',
            width: 100
        }, {
            text: '风格',
            dataIndex: 'style',
            width: 100
        }, {
            text: '户型',
            dataIndex: 'houseType',
            width: 100
        }, {
            text: '空间',
            dataIndex: 'space',
            width: 100
        },{
            text: '创建时间',
            dataIndex: 'createTime',
            width:100
        },{
            text: '操作',
            xtype: 'actioncolumn',
            width: 100,
            items: [{
                tooltip: '添加',
                icon: 'resourcesicons/new-icon.png',
                handler: 'bringIntoMyStudio'
            },{
                tooltip: '推荐',
                icon: 'resourcesicons/hot-icon.png',
                handler: 'recommendPanoram'
            }]
        }],
        selModel: {
            selType: 'checkboxmodel'
        },
        dockedItems: [{
            xtype: 'toolbar',
            items: [ '->', {
                text: '查询',
                iconCls: 'fa fa-search',
                reference: 'btn_search',
                handler: 'search'
            }
                , {
                    text: '清空条件',
                    iconCls: 'fa fa-search',
                    listeners: {
                        click: 'reset'
                    }
                }]
        }, {
            xtype: 'pagingtoolbar',
            store: 'panoram.Panoram',
            dock: 'bottom',
            displayInfo: true
        }],
        listeners: {
            beforerender: 'gridBeforeRender',
            render: 'search'
        }
    }

在web显示数据时,会遇到grid的列数和行数不确定的这种情况。如何来根据数据动态的创建表格呢?
Extjs 的json data给我们带来了一个很好的比较简单的方法。
要创建一个grid需要确定它的列数,再根据数据的数量就可以确定行数了。
看到有人用过一种方法就是讲列的属性和数据一起放在json
data里去,这样可以达到效果,但是不难发现,这样的话,就很难进行分页或者更新表格里的数据。
其实我们可以结合extjs官网上的那种固定列数的访问方法来动态生成表格。
首先通过Ajax从服务端反回列的信息,封装成json
,表格数据通过另一个ajax请求来获得,因为列已经获得,所以可以将此封装成一个store.这样大功告成,生成grid所需要的,store,和cm
demo 源码如下:(由于考虑到代码简介明了,我将数据写死在了js 中):
Ext.onReady(function(){ // NOTE: This is an example showing simple state
management. During development, // it is generally best to disable state
management as dynamically-generated ids // can change across page loads,
leading to unpredictable results. The developer // should ensure that
stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var
myData =[[1,1,1,1], [2,2,2,2] ]; // example of custom renderer
function function change(val){ if(val > 0){ return ” + val + ”; }else if(val < 0){ return
” + val + ”; } return val; } //
example of custom renderer function function pctChange(val){ if(val >
0){ return ” + val + ‘%’; }else
if(val < 0){ return ” + val + ‘%’;
} return val; } // create the data store var fieldDatas =
“{‘columModle’:[“+ “{‘header’: ‘seq’,’dataIndex’:
‘number’,’width’:40},”+ “{‘header’: ‘code’,’dataIndex’: ‘text1’},”+
“{‘header’: ‘name’,’dataIndex’: ‘info1’},”+ “{‘header’:
‘price’,’dataIndex’: ‘special1′}”+ “],’fieldsNames’:[{name:
‘number’},”+ “{name: ‘text1’}, {name: ‘info1’},”+ “{name:
‘special1’}]}”; var json = new Ext.util.JSON.decode(fieldDatas); var cm
= new Ext.grid.ColumnModel(json.columModle); var store = new
Ext.data.SimpleStore({ fields: json.fieldsNames });
store.loadData(myData); // var ds = new Ext.data.JsonStore({ //
data:store.toSource(), // fields:json.fieldsNames // }); // create the
Grid var grid = new Ext.grid.GridPanel({ height:200, width:400, region:
‘center’, split: true, border:false, store:store, cm:cm });
grid.render(‘grid-example’); });

WebMisDeveloper最新版本为4.5.2,之后升级版本为WebMisSharp,WebMisDeveloper为完全开源软件不会向您收取任何费用大家警惕淘宝的虚假销售

html:

远程服务器分页

grid远程分页

Ext.define('app.view.test.region.Form', {
    extend: 'Ext.Panel',
    alias: 'widget.testform',
    modal: true,
    layout: 'border',
    initComponent: function() {
       this.items = [];
       function createGrid() {
           var store = new Ext.data.Store({       
                id: 'gridStore',
                autoLoad: false,
                fields: [                
                   'app_id',               
                   'app_name',               
                   'cete_name',            
                ],    
                data: [{
                   app_id: '1',
                   app_name: 'QQ',
                   cete_name: '社交'
                }, {
                   app_id: '2',
                   app_name: '微信',
                   cete_name: '社交'
                }, {
                   app_id: '3',
                   app_name: 'QQ空间',
                   cete_name: '社交'
                }];
                pageSize: 1000, //每页记录数量
                proxy: {
                   type: 'ajax',
                   method: 'get',
                   url: '/ajax/ListRS1Data', // 请求URL加载数据
                   extraParams: {
                       start_day: Ext.Date.format(new Date(new Date() - 86400)), 'Ymd'),
                       end_day: Ext.Date.format(new Date(), 'Ymd'),
                   },
                   reader: {
                       type: 'json',
                       rootProperty: 'data',
                       totalProperty: 'total',
                       successProperty: 'ret'
                   }
                }
           });
           store.load({            
               params: {                
                   start: 0,                
                   limit: itemsPerPage            
               }       
           });
           var grid = {
               xtype: 'grid',            
               // title: 'Extjs grid 分页',            
               name: 'datagrid',            
               hidden: false,            
               region: 'center',            
               width: '100%',            
               autoScroll: true,            
               store: store,
               columns: [{                
                   header: 'APPID',                
                   dataIndex: 'app_id',                
                   align: 'center',                
                   flex: 1            
               }, {                
                   header: 'APP名称',                
                   dataIndex: 'app_name',                
                   align: 'center',                
                   flex: 1            
               }, {                
                   header: '类目',               
                   dataIndex: 'cete_name',                
                   align: 'center',                
                   flex: 1           
               }],
               dockedItems: [{
                   xtype: 'pagingtoolbar',
                   store: store, // GridPanel使用相同的数据源
                   dock: 'bottom',
                   pageSize: 1000, //每页记录数量
                   displayInfo: true
               }],    
           };
           return grid;
        }
        this.items = [{
           region: 'center',
           xtype: 'panel',
           name: 'listpanel',
           split: true,
           autoScroll: true,
           layout: 'anchor',
           defaults: {
               anchor: '100%'
           },
           items: [createGrid()],
        }];
        this.callParent();
    }
});

动态改变参数

clickSearch: function() {    
    var self = this.getView();    
    var panel = self.down('panel[name=listpanel]');  
    var grid = panel.down('grid');    
    var form = panel.down('form');    
    var selectValue = form.getValues();
    var store = grid.getStore();    
    var proxy = store.getProxy();    
    proxy.extraParams = {};    
    if (proxy) {        
        Ext.apply(proxy.extraParams, selectValue);        
        if (store.isLoaded() || store.autoLoad) {            
            store.removeAll();            
            store.loadPage(1);        
        }   
    }
}

这是个items里面的grid,在PanoramController.js里写好方法

奥门威尼斯网址 1

[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“; 
<html> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″> 
<title>les01</title> 
<link rel=”stylesheet” type=”text/css”
href=”../Extjs/resources/css/ext-all.css”> 
<script type=”text/javascript”
src=”../Extjs/bootstrap.js”></script> 
<script type=”text/javascript”
src=”../Extjs/locale/ext-lang-zh_CN.js”></script>   
<script type=”text/javascript”
src=”griddemo1.js”></script>  
<style type=”text/css”> 
.button {   
    display: inline-block;   
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block
*/   
    *display: inline;   
    vertical-align: baseline;   
    margin: 0 2px;   
    outline: none;   
    cursor: pointer;   
    text-align: center;   
    text-decoration: none;   
    font: 8px/100% Arial, Helvetica, sans-serif;   
    padding: .2em 2em .5em;   
    text-shadow: 0 1px 1px rgba(0,0,0,.3);   
    -webkit-border-radius: .5em;    
    -moz-border-radius: .5em;   
    border-radius: .5em;   
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);   
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);   
    box-shadow: 0 1px 2px rgba(0,0,0,.2);   
}   
.button:hover {   
    text-decoration: none;  
}   
.button:active {   
    position: relative;   
    top: 1px;   
}   
    
/* green */ 
.green { 
    color: #e8f0de; 
    border: solid 1px #538312; 
    background: #64991e; 
    background: -webkit-gradient(linear, left top, left bottom,
from(#7db72f), to(#4e7d0e)); 
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e); 
    filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr=’#7db72f’,
endColorstr=’#4e7d0e’); 

.green:hover { 
    background: #538018; 
    background: -webkit-gradient(linear, left top, left bottom,
from(#6b9d28), to(#436b0c)); 
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c); 
    filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr=’#6b9d28′,
endColorstr=’#436b0c’); 

奥门威尼斯网址,.green:active { 
    color: #a9c08c; 
    background: -webkit-gradient(linear, left top, left bottom,
from(#4e7d0e), to(#7db72f)); 
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f); 
    filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr=’#4e7d0e’,
endColorstr=’#7db72f’); 

 
</style>  
</head> 
<body> 
<div id=”griddemo”> 
 
</div> 
 
</body> 
</html> 

var rec = grid.getStore().getAt(rowIndex);//获取当前行的对象

rec.get('id')//get()里面加上dataIndex的值,即可获取该列的值

第一句锁定行,第二句锁定列,获取某一行某一列的数据,也可以用rec把整个grid提交,但是没什么意义

recommendPanoram: function (grid,rowIndex) {
        var rec = grid.getStore().getAt(rowIndex);
        Common.util.Util.doAjax({
            url: Common.Config.requestPath('Panoram', 'recommendPanoram'),
            method: 'post',
            params: {
                id:rec.get('id')
            },
            callback: function() {
                window.store.loadPage(1);
            }
        }, function () {
            Common.util.Util.toast("推荐成功");
        });
    },

BUG修复

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“;
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″>
<title>les01</title>
<link rel=”stylesheet” type=”text/css”
href=”../Extjs/resources/css/ext-all.css”>
<script type=”text/javascript”
src=”../Extjs/bootstrap.js”></script>
<script type=”text/javascript”
src=”../Extjs/locale/ext-lang-zh_CN.js”></script> 
<script type=”text/javascript”
src=”griddemo1.js”></script>
<style type=”text/css”>
.button { 
    display: inline-block; 
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block
*/ 
    *display: inline; 
    vertical-align: baseline; 
    margin: 0 2px; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    font: 8px/100% Arial, Helvetica, sans-serif; 
    padding: .2em 2em .5em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em;  
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 

.button:hover { 
    text-decoration: none;

.button:active { 
    position: relative; 
    top: 1px; 

  
/* green */
.green {
 color: #e8f0de;
 border: solid 1px #538312;
 background: #64991e;
 background: -webkit-gradient(linear, left top, left bottom,
from(#7db72f), to(#4e7d0e));
 background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
 filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr=’#7db72f’,
endColorstr=’#4e7d0e’);
}
.green:hover {
 background: #538018;
 background: -webkit-gradient(linear, left top, left bottom,
from(#6b9d28), to(#436b0c));
 background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
 filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr=’#6b9d28′,
endColorstr=’#436b0c’);
}
.green:active {
 color: #a9c08c;
 background: -webkit-gradient(linear, left top, left bottom,
from(#4e7d0e), to(#7db72f));
 background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
 filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr=’#4e7d0e’,
endColorstr=’#7db72f’);
}

 

在Leader.cs的222行,存在一个bug,这个bug导致不能删除数据库中的表,大家可以自行修改,方法如下:

</style>
</head>
<body>
<div id=”griddemo”>

奥门威尼斯网址 2

</div>

 

</body>
</html>
griddemo1.js

 

 

首先还是先来介绍下什么是WebMisDeveloper吧,以及他的功能。

[javascript] 
(function(){ 
    Ext.onReady(function(){ 
        Ext.QuickTips.init(); 
        //数据集  
        Ext.create(‘Ext.data.Store’, { 
            storeId:’simpsonsStore’, 
            fields:[‘name’, ‘age’, ’email’], 
            data:{‘items’:[ 
                { ‘name’: ‘Lisa’, “age”:33,
“email”:”[email protected]” 
}, 
                { ‘name’: ‘Bart’, “age”:33,
“email”:”[email protected]”
}, 
                { ‘name’: ‘Homer’, “age”:33,
“email”:”[email protected]”
}, 
                { ‘name’: ‘Marge’,
“age”:33,”email”:”[email protected]”} 
            ]}, 
            proxy: { 
                type: ‘memory’, 
                reader: { 
                    type: ‘json’, 
                    root: ‘items’ 
                }, 
                writer:{ 
                    type: ‘json’ 
                } 
            } 
        }); 
        //big panel  
        var grid = Ext.create(“Ext.grid.Panel”,{ 
            title:”Grid demo”, 
            frame: true,  //大边框   
            forceFit: true, //自动填充  
            columns:[  //age email 可编辑  
                {text:”name”,dataIndex:”name”   }, 
                {text:”age”,
dataIndex:”age”,field:{xtype:”textfield”,allowBlank:false}}, 
                {text:”email”,
dataIndex:”email”,field:{xtype:”textfield”,allowBlank:false}} 
            ], 
            renderTo:Ext.get(“griddemo”), 
//要渲染的页面组件,就是一个div  
            width:500, 
            height:300, 
            store: Ext.data.StoreManager.lookup(‘simpsonsStore’), 
//载入数据集  
            tbar:[ //topbar
上面工具栏,每个配置依次是组件名称,名字,样式,单击事件  
                {xtype:”button”, text:”添加”,cls:”button green”}, 
                {xtype:”button”, text:”修改”,cls:”button green”}, 
                {xtype:”button”, text:”查看”,cls:”button green”}, 
                {xtype:”button”, text:”删除”,cls:”button green”, 
                    handler:function(button){ 
                        //获取选中的行  
                        var grid =
button.findParentByType(“gridpanel”); 
                        var data =
grid.getSelectionModel().getSelection(); 
                        if(data.length==0){ 
                            alert(“请选择一条数据”);  
                        }else{ 
                            //先得到主键 这里假定是name   
                            var store = grid.getStore(); 
                            var ids = []; 
                            Ext.Array.each(data,function(record){ 
                                ids.push(record.get(“name”)); 
                            }); 
                            console.log(ids); 
                            //后台删除 这里没有后台 假定成功了,
返回一个数组,ids  
                            Ext.Array.each(data,function(record){ 
                                store.remove(record); 
                            }); 
                        } 
                    } 
                } 
            ], 
            dockedItems:[{ 
                xtype:”pagingtoolbar”, //分页组件  
                store:Ext.data.StoreManager.lookup(‘simpsonsStore’),  
                dock:”bottom”,  //下面的分页栏  
                displayInfo:true //右下方信息显示  
            }], 
            selType:”checkboxmodel”,  //多选框选择模式  
            multiSelect:true,   //允许多选  
            plugins: [ 
                Ext.create(‘Ext.grid.plugin.CellEditing’, { 
                    clicksToEdit: 1 
                }) 
            ] 
        })     
         
         
    //ready end      
    });      
})(); 

1、说的直白一点他就是一款代码生成器。

(function(){
    Ext.onReady(function(){
        Ext.QuickTips.init();
        //数据集
  Ext.create(‘Ext.data.Store’, {
      storeId:’simpsonsStore’,
      fields:[‘name’, ‘age’, ’email’],
      data:{‘items’:[
          { ‘name’: ‘Lisa’, “age”:33,
“email”:”[email protected]” 
},
          { ‘name’: ‘Bart’, “age”:33,
“email”:”[email protected]”
},
          { ‘name’: ‘Homer’, “age”:33,
“email”:”[email protected]”
},
          { ‘name’: ‘Marge’,
“age”:33,”email”:”[email protected]”}
      ]},
      proxy: {
          type: ‘memory’,
          reader: {
              type: ‘json’,
              root: ‘items’
          },
          writer:{
              type: ‘json’
          }
      }
  });
        //big panel
        var grid = Ext.create(“Ext.grid.Panel”,{
            title:”Grid demo”,
            frame: true,  //大边框
            forceFit: true, //自动填充
            columns:[  //age email 可编辑
                {text:”name”,dataIndex:”name”   },
                {text:”age”,
dataIndex:”age”,field:{xtype:”textfield”,allowBlank:false}},
                {text:”email”,
dataIndex:”email”,field:{xtype:”textfield”,allowBlank:false}}
            ],
            renderTo:Ext.get(“griddemo”), 
//要渲染的页面组件,就是一个div
            width:500,
            height:300,
            store: Ext.data.StoreManager.lookup(‘simpsonsStore’), 
//载入数据集
            tbar:[ //topbar
上面工具栏,每个配置依次是组件名称,名字,样式,单击事件
                {xtype:”button”, text:”添加”,cls:”button green”},
                {xtype:”button”, text:”修改”,cls:”button green”},
                {xtype:”button”, text:”查看”,cls:”button green”},
                {xtype:”button”, text:”删除”,cls:”button green”,
                    handler:function(button){
                        //获取选中的行
                        var grid =
button.findParentByType(“gridpanel”);
                        var data =
grid.getSelectionModel().getSelection();
                        if(data.length==0){
                            alert(“请选择一条数据”);
                        }else{
                            //先得到主键 这里假定是name
                            var store = grid.getStore();
                            var ids = [];
                            Ext.Array.each(data,function(record){
                                ids.push(record.get(“name”));
                            });
                            console.log(ids);
                            //后台删除 这里没有后台 假定成功了,
返回一个数组,ids
                            Ext.Array.each(data,function(record){
                                store.remove(record);
                            });
                        }
                    }
                }
            ],
            dockedItems:[{
                xtype:”pagingtoolbar”, //分页组件
                store:Ext.data.StoreManager.lookup(‘simpsonsStore’),
                dock:”bottom”,  //下面的分页栏
                displayInfo:true //右下方信息显示
            }],
            selType:”checkboxmodel”,  //多选框选择模式
            multiSelect:true,   //允许多选
            plugins: [
          Ext.create(‘Ext.grid.plugin.CellEditing’, {
              clicksToEdit: 1
          })
            ]
        })   
       
       
    //ready end   
    });    
})();

2、WebMisDevelper自动生成的代码都是基于Extjs的。

 

3、通过WebMisDevelper,您无需接触任何开发软件,即可搭建一套基本的框架(系统目前提供三套框架)

效果:

4、WebMisDeveloper可以根据用户配置自动生成数据库,表,表字段说明等信息

 奥门威尼斯网址 3
 

5、WebMisDeveloper生成的数据目前支持Oracle和SQLServer2000,2005,2008

 

6、根据用户选择WebMisDeveloper可以自动生成基于Extjs(2.0)+MVC+Nhibernate+Asp.net框架的WebMis

: html: [html] !DOCTYPE html PUBLIC
-//W3C//DTD HTML 4.01 Frameset//EN
html head meta
http-equiv=Content-Type content=text/html; ch…

7、根据用户选择WebMisDeveloper可以自动生成基于Extjs(2.0)+简单三层 框架的WebMis

8、根据用户选择WebMisDeveloper可以自动生成基于Ext.Net(Extjs可视化控件库,基于Extjs3.2)+简单三层
框架的WebMis

9、WebMisDeveloper生成的WebMis涵盖功能:角色权限分配,用户管理,角色管理,密码修改,信息发布等基本功能,并且自动生成基于每个表结构的增、删、改、查、分页、导出Excel等功能

10、WebMisDeveloper自动生成数据库的同时还能方便的生成数据字典,方便后期维护

11、WebMisDeveloper具有强大的二次开发自动配置功能,能够方便的配置Spring.Net,Nhibernate,Extjs界面等,无须人工干预,自动配置完毕

12、WebMisDeveloper具有三个基本功能“新建项目”,“后台速成”,“二次开发”能够极大限度的节省您的时间,使您快速进入业务逻辑开发,免去很多不必要的步骤

13、总之WebMisDeveloper的目的就是极大限度的节省时间,方便二次开发,是您快速步入业务逻辑开发阶段。

14、WebMisDeveloper目前开源,面向大众,不当之处,请大家拍砖,高手请避开

OK,

下面来一段完整的介绍

  
随着互联网的飞速发展,企业办公的自动化程度越来越高,与此同时基于浏览器/服务器(B/S)模式的信息管理系统也越来越受到企业的青睐,以其独有的便捷性、低硬件要求等特点,逐渐的取代着传统的客户端/服务器(C/S)模式的信息管理系统。随着企业对信息管理系统需求量的提高,Mis系统的开发上却并未出现提高,仍然是传统的开发模式,开发周期长、效率低,开发人员存在大量的重复性劳动。虽然目前市面上已经有类似的自动生成器(动软代码生成器、Code
Smith等),一定程度上提高了开发效率,但对应用者的要求较高,还需进行的修改工作量很大。

    
WebMisDeveloper适当降低了对使用者的要求,通过WebMisDeveloper生成的系统更接近实际的WebMIS系统,减少了对系统的修改量,只需要进行业务逻辑的编码,WebMisDeveloper会自动生成一套完整的架构,各个层次模块,以及UI界面。开发人员可以非常方便地对其进行二次开发。

WebMisDeveloper主要功能简介:

1、  新建项目

通过该功能,用户仅需要跟着向导走,无需接触开发软件,通过您的配置,系统将会自动为您创建数据库,创建数据库的表,在您配置的指定位置生成一套基本的WebMis,该系统您可直接编译运行。

2、  后台速成

如果您的系统已经有了数据库,那么可以通过该功能为您的数据库生成一个基本的后台管理系统,该系统涵盖基于您数据库每张表的增、删、改、查、分页功能,并自动生成角色/功能管理模块,用户仅需编写相应业务逻辑编码即可。

3、  二次开发

二次开发,主要是为新建项目和后台速成服务的。当用户通过以上功能生成了系统后,由于需求等原因,需要增加功能节点和数据库的表,那么可以通过二次开发功能,将基于该表的增、删、改、查、分页功能自动添加到项目中,免去手动配置的繁琐性,系统并会自动添加功能节点和UI界面。

 

软件使用说明:见源码附件

  

软件部分截图:

WebMisDeveloper4.5.0截图

奥门威尼斯网址 4

通过WebMisDeveloper生成的框架,运行起来的效果

奥门威尼斯网址 5

奥门威尼斯网址 6

奥门威尼斯网址 7

奥门威尼斯网址 8

奥门威尼斯网址 9

当然您可以根据您的具体需求对后台进行布局的调整。

好了简单的就介绍这些东西。希望WebMisDeveloper能够带给您高效的开发体验。

奥门威尼斯网址 10

奥门威尼斯网址 11

附件:WebMisDeveloper源代码,如果不想修改的话,直接复制Debug,就当绿色软件使用吧。

   CSDN下载:

官网下载:

更多介绍请参看:

欢迎大家加入WebMisSharp(WebMisDeveloper)群:215194296 

如果您认可我的工作,并且觉得WebMisDeveloper对您有所帮助,可以通过支付宝或转发文章的方式资助我们,我们愿意接受来自各方面的捐赠。再次感谢您对开源事业的赞助和支持!

奥门威尼斯网址 12

 😉  😉
 😉  😉
 😉  😉
 😉 更多
 😉

作者:JackChain

出处:http://www.cnblogs.com/qidian10

官网:

发表评论

电子邮件地址不会被公开。 必填项已用*标注