本文目录一览:
- 1、extjs里如何调整columns里的列宽
- 2、前端技术FLEX,EXTJS,easyui选择哪个比较好
- 3、求助,extjs表格中最后的那列怎么去掉啊,效果在下面,求高手指点!!!!!
- 4、extjs:gridpanel 列宽如何自适应浏览器的宽度
- 5、extjs中如何让flex:1失效
- 6、extjs4中的flex属性是什么意思呢,有图请进
extjs里如何调整columns里的列宽
其实不要想得太复杂,可以直接给column设置width属性来改变宽度。
如果要设置自适应列宽的话可以参考以下:
var grid = new Ext.grid.GridPanel({
title : '表格列自动分配宽度',
columns : [
{header : 'id',dataIndex:'id',width: 200},
{header :'name',dataIndex:'name'}
],
store : 数据源
});
前端技术FLEX,EXTJS,easyui选择哪个比较好
要明白一点:没有最好的技术,只有最适合的技术。各种技术总有自己在某些方面的优势,所以必须要结合项目实际情况才能说哪种技术更适合。
FLEX
优点:动画效果漂亮,可定制开发程度较高,可以实现较为复杂的功能(例如socket长连接通信等)。
缺点:因为是flash所以需要插件,在iOS等不支持flash的平台上就麻烦了。另外因为涉及ActionScript脚本,所以需要一些学习成本。
ExtJS
优点:基于javascript、HTML、和CSS。UI组件丰富,整体设计清晰,大多数情况不需要额外定制开发,即可使用内置的组件实现比较美观、风格统一的页面。中文资料文档较多。
缺点:学习难度相对较大。定制开发组件难度较大。库文件体积稍大。相对不容易调试查错。
EasyUI
优点:基于javascript、HTML、和CSS。UI组件也挺多,基本够用。使用简单,通过HTML标记或者js脚本都能创建组件。学习难度较低。官方提供了比较详细的示例。扩展特性还不错,包括主题风格。容易调试。
缺点:中文文档资料不够完善,好在官网英文文档写的还比较清晰易懂。可扩展性相对较差。
求助,extjs表格中最后的那列怎么去掉啊,效果在下面,求高手指点!!!!!
我觉得这不是最后一列。。。只是说你所有的列就只有这么宽了,所以后面留白了
你可以在其中一列中定义如下属性
columns: [{
text: '列名',
flex: 1,
dataIndex: 'xxx'
}]
用flex来填充宽,就不会留白了
其中
flex也可以是小数,即 flex: 0.5
所有列的flex相加最好为1,即其宽的百分比
extjs:gridpanel 列宽如何自适应浏览器的宽度
用.x-grid3-header-offset{width:auto;} 就可以实现;
参考代码如下:
/*store之类的就省略了*/
var sm = new Ext.grid.CheckboxSelectionModel({
handleMouseDown : function(){}
});
var gridColumn = new Ext.grid.ColumnModel([
sm,
{header:'地市',dataIndex:'areaName',width:200},
{header:'品牌',dataIndex:'brandName',width:200},
{header:'指标',dataIndex:'busiTypeName',width:200},
{header:'1日',dataIndex:'day1',width:200},
{header:'2日',dataIndex:'day2',width:200},
{header:'3日',dataIndex:'day3',width:200},
{header:'4日',dataIndex:'day4',width:200},
{header:'5日',dataIndex:'day5',width:200}
]);
var gridPanel = new Ext.grid.GridPanel({
id: 'gridPanelId',
cm: gridColumn,
sm: sm,
ds: gridStore,
frame: true,
autoScroll: true,
height: 550,
tbar: topToolbar,
bbar: new Ext.PagingToolbar({
id: 'pagingToolbarId',
store: gridStore,
displayInfo: true,
pageSize: 10
})
});
var linePanel = new Ext.Panel({
id: 'linePanelId',
frame: true,
contentEl: 'myChartId',
height: 550
});
var backPanel = new Ext.Panel({
id: 'backPanelId',
frame: true,
autoScroll: true,
items: [gridPanel, linePanel]
});
new Ext.Viewport({
layout: 'fit',
items: backPanel
注意:不要设置viewConfig: {forceFit: true},这个是把列宽(即ColumnModel的宽度)设置为自动宽度,不是整个GridPanel的宽度。
extjs中如何让flex:1失效
你可以动态修改flex的值的,通过a.flex=xxx 这样就可以设置。设置完成之后需要调用一下a的父panel的doLayout()方法。如果你想隐藏a,就把a的flex设置成-1就好了
extjs4中的flex属性是什么意思呢,有图请进
是一种比例关系。 所有含有flex的项加起来,假如值是y,自己flex的值是x,则宽度占总数的比例为x/y