Ext.onReady(function(){
//var sm=new Ext.grid.CheckboxSelectionModel();//sm身兼两职,既要放到cm里,也要放到GridPanel里
//列模型
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//行号
//sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},//sortable设定该列具有排序的功能
{header:'名称',dataIndex:'name',width:80},
{header:'描述',dataIndex:'descn',width:200,editor:new Ext.form.TextField({
allowBlank:false
})},
{header:'选项',dataIndex:'choose',width:80,renderer:renderChoose}
]);
//针对'choose'的值进行渲染的方法
function renderChoose(value){
//renderer是负责渲染的属性
if(value=="n"){
return "<span style='color:red;'>N</span>"
}else{
return "<span style='color:blue;'>Y</span>"
}
}
//数据 JSON类型
var data=[
['1','name1','descn1','n'],
['2','name2','descn2','y'],
['3','name3','descn3','n'],
['4','name4','descn4','y'],
['5','name5','descn5','n'],
['6','name6','descn6','n'],
['7','name7','descn7','n'],
['8','name8','descn8','n'],
['9','name9','descn9','n'],
['10','name10','descn10','n'],
['11','name11','descn11','n'],
['12','name12','descn12','n'],
['13','name13','descn13','n'],
['14','name14','descn14','n'],
['15','name15','descn15','n'],
['16','name16','descn16','n'],
['17','name17','descn17','n'],
['18','name18','descn18','n'],
['19','name19','descn19','n'],
['20','name20','descn20','n']
];
//store是数据存储对象,负责把各种类型的数据,转化为适合Grid的数据
var store=new Ext.data.Store({
//proxy:获取数据的方式
//reader:解析数据
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},//mapping可以不写
{name:'name'},
{name:'descn'},
{name:'choose'}
])
});
var grid=new Ext.grid.EditorGridPanel({
renderTo:'myid',
store:store,
width:450,
height:130,
loadMask:true,
cm:cm,
//sm:sm,
bbar:new Ext.PagingToolbar({
pageSize:5,
store:store,
displayInfo:true
}),
viewConfig:{
forceFit:true//设置为true的时候,可以使列自动填满
//autoExpandColumn:'descn'
}
});
store.load();
});
分享到:
相关推荐
ExtJS的GridPanel导出excel文件,方便快捷易懂!
NULL 博文链接:https://aa00aa00.iteye.com/blog/564647
EXTJS.GRIDPANEL中日期格式 设置
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
主要介绍了ExtJs中gridpanel分组后组名排序实例代码,有需要的朋友可以参考一下
Extjs4.1 小例子(适合extjs初学者学习使用).直接导入myeclipse即可
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
Extjs2.02 Gridpanel加载本地数组资源的实例,思路相当清晰。对初学者很有用
一个关于GridPanel的使用例子 介绍了Proxy,JsonReader Store gridPanel等几个对象的简单使用
NULL 博文链接:https://topbox163.iteye.com/blog/1276463
此文件用于项目首页内容,使用了ExtJs中的GridPanel
新手学习,初学extjs时用刚刚好,里边有三个例子,还有一个我自己写的例子(简单粗暴动态菜单),还有一个中文API
后来公司让改变一个Gridpanel的展现方式,要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久,也没有找到框架的相应控制方法,然后在网上找了很久,也没有找到有人给去示例,无奈就只能自己写JS来控制...
NULL 博文链接:https://tonylian.iteye.com/blog/1735525
...
...
ExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
本文为大家详细介绍下ExtJs如何设置GridPanel表格文本垂直居中,具体实现代码及截图如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。