ExtJS4.2学习(三)Grid表格



20111026104357597.jpgVan思考者日记网-束洋洋个人博客

Ext中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xtype为grid。在EXT中,表格控件必须包含列定义信息,并指定表格的数据存储器。表格数据最起码有列、数据、转换原始数据这3项。列信息由数组columns定义,表格的数据存储器由Ext.data.Store来定义。store负责把各种各样(如二维数组、JSON对象数组、XML文本等)的原始数据转换成Ext.data.Record类型的对象。通过Ext.data.ArrayStore我们可以把任何格式的数据转化成表格可以使用的形式,这样就不需要为每种数据格式写一个对应的实现了。Van思考者日记网-束洋洋个人博客

制作一个简单的表格及属性说明Van思考者日记网-束洋洋个人博客

<script type="text/javascript">  
//表格数据最起码有列、数据、转换原始数据这3项  
Ext.onReady(function(){  
    //定义列  
    var columns = [  
        {header:'编号',dataIndex:'id'}, //sortable:true 可设置是否为该列进行排序  
        {header:'名称',dataIndex:'name'},  
        {header:'描述',dataIndex:'descn'}  
      ];  
    //定义数据  
    var data =[  
        ['1','张三','描述01'],  
        ['2','李四','描述02'],  
        ['3','王五','描述03'],  
        ['4','束洋洋','思考者日记网'],  
        ['5','高飞','描述05']  
    ];  
    //转换原始数据为EXT可以显示的数据  
    var store = new Ext.data.ArrayStore({  
        data:data,  
        fields:[  
           {name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置  
           {name:'name'},  
           {name:'descn'}  
        ]  
    });  
    //加载数据  
    store.load();  
      
    //创建表格  
    var grid = new Ext.grid.GridPanel({  
        renderTo:'grid', //渲染位置  
        store:store, //转换后的数据  
        columns:columns, //显示列  
        stripeRows:true, //斑马线效果  
        //enableColumnMove: false, //禁止拖放列  
        //enableColumnResize: false, //禁止改变列宽度  
        loadMask:true, //显示遮罩和提示功能,即加载Loading……  
        forceFit:true //自动填满表格  
    });  
});  
  
</script>

 Van思考者日记网-束洋洋个人博客

主要代码如上,注释部分已经写的很详细了,大家用到的时候可以参考下。最终效果如下:Van思考者日记网-束洋洋个人博客

QQ截图20131107225420.jpgVan思考者日记网-束洋洋个人博客

另外,有什么想说的,欢迎大家在下面留言,大家一起讨论进步!Van思考者日记网-束洋洋个人博客

 Van思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridVan思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridVan思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingVan思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格Van思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldVan思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件Van思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorVan思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 Van思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解Van思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目Van思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈