extjs中的flex的簡單介紹

本文目錄一覽：

• 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