ext T型布局
Ext.onReady(function(){
Ext.QuickTips.init();
var tbarArray = [{
text : '新增',
tooltip : '新增',
iconCls : 'add',
handler : function(){}
},{
text : '编辑',
tooltip : ' 编辑',
iconCls : 'edit',
handler : function() {}
}]
var tb = new Ext.Toolbar({
items : tbarArray
})
var item1 = new Ext.Panel({
title: '公司管理',
border : false,
iconCls : 'next',
layout: 'border',
items: [{
region: 'west',
xtype: 'treepanel',
border : false,
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
id : 'row',
text: '用户管理',
url : 'userList!list.action',
leaf: true
}, {
text: '角色管理',
url : 'roleList!list.action',
leaf: true
}, {
text: '日志管理',
url : 'logList!list.action',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
if(n.attributes.id && n.attributes.url) {
Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
}
}
}
}, {
region: 'center',
xtype: 'tabpanel'
}]
});
var item2 = new Ext.Panel({
title: '客户管理',
html: '<empty panel>',
border : false,
iconCls : 'next'
});
var item3 = new Ext.Panel({
title: '项目管理',
html: '<empty panel>',
border : false,
iconCls : 'next'
});
var item4 = new Ext.Panel({
title : '销售管理',
html: '<empty panel>',
border : false,
iconCls : 'next'
});
var tbarPanel = new Ext.Panel({
region : 'center',
split : true,
border : false,
layout:'accordion',
items: [item1, item2, item3, item4]
})
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
//layout: 'card',
xtype: 'tabpanel',
activeItem: 0,
border: false,
items: [
myLogLayOut, rowLayout
]
};
var viewport = new Ext.Viewport({
layout : 'border',
items : [{
cls : 'header',
border : false,
region : 'north', //北方
contentEl : 'header',
height:47
},{
layout: 'fit',
region : 'west', //西方
split: true,
collapsible: true,
collapseMode:'mini',
width: 205,
minSize: 100,
maxSize: 500,
items : [tbarPanel]
},
contentPanel,
{
region : 'south', //南方
title: 'Information',
contentEl : 'foot',
split: true,
collapsible: true,
collapseMode:'mini',
height: 65,
minHeight: 65
}]
})
})
var rowLayout = {
id: 'row-panel',
bodyStyle: 'padding:5px',
layout: 'ux.row',
title: 'Row Layout',
items: [{
title: 'Height = 25%, Width = 50%',
rowHeight: 0.25,
width: '50%'
},{
title: 'Height = 100px, Width = 300px',
height: 100,
width: 300
},{
title: 'Height = 75%, Width = fit',
rowHeight: 0.75
}]
};
/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/
var searchFaqQeustion = new Ext.form.TextField({
name : "searchFaqQuestion",
width : 180,
emptyText : "多条件用空格隔开...",
listeners : {
specialkey : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
}
}
}
});
var searchFaqAnswer = new Ext.form.TextField({
name : "searchFaqAnswer",
width : 180,
emptyText : "多条件用空格隔开...",
listeners : {
specialkey : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
}
}
}
});
var editTimeStart = new Ext.form.DateField({
id : 'editTimeStart',
name : 'editTimeStart',
xtype : 'datefield',
vtype : 'daterange',
format : 'Y-m-d',
altFormats : 'Y-m-d',
endDateField : 'editTimeEnd',
listeners : {
specialkey : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
}
}
}
});
var editTimeEnd = new Ext.form.DateField({
id : 'editTimeEnd',
name : 'editTimeEnd',
xtype : 'datefield',
vtype : 'daterange',
format : 'Y-m-d',
altFormats : 'Y-m-d',
startDateField : 'editTimeStart',
listeners : {
specialkey : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
}
}
}
});
var actionTbarArray = [{
text : '新建用户',
tooltip : '新建用户',
iconCls : 'add',
handler : function() {
}
}, {
text : '修改用户',
tooltip : '修改选中的用户',
iconCls : 'edit',
handler : function() {
var records = checkboxSelectionModel.getSelections();
if (records.length == 0) {
Ext.Msg.alert('友情提示', '请选择您要修改的知识点!');
} else if (records.length == 1) {
} else {
Ext.Msg.alert('友情提示', '您每次只能选择一条知识点进行修改!');
}
}
}, {
text : '删除用户',
tooltip : '删除选中的用户',
iconCls : 'delete',
handler : function() {
var records = checkboxSelectionModel.getSelections();
if (records.length == 0) {
Ext.Msg.alert('友情提示', '请选择要删除的知识点!');
return;
}
Ext.Msg.confirm("友情提示", "您确定要删除所有选中的知识点吗?", function(clickType) {
if (clickType == "yes") {
var ids = "<remove>";
for (var i = 0; i < records.length; i++) {
ids += "<id>" + records[i].get("id") + "</id>";
}
ids += "</remove>";
}
});
}
}, '-', {
text : '刷新列表',
tooltip : '刷新列表用户',
iconCls : 'refresh',
handler : function() {
}
}];
var actionTbar = new Ext.Toolbar({
items : actionTbarArray
});
//create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: 'sheldon.xml',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'Item',
id: 'ASIN',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title',
'Manufacturer',
'ProductGroup',
// Detail URL is not part of the column model of the grid
'DetailPageURL'
])
});
store.load();
//create the grid
var grid = new Ext.grid.GridPanel({
//region : 'center',
border : false,
store: store,
columns: [
{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
{header: "Title", width: 180, dataIndex: 'Title', sortable: true},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
stripeRows : true,
loadMask : true,
viewConfig: {
forceFit: true
},
listeners : {
render : function() {
var searchTbar = new Ext.Toolbar({
items : ['问题:',searchFaqQeustion,
'答案:',searchFaqAnswer,
'编辑时间:', '从',
editTimeStart, '到',
editTimeEnd, {
text : '查询',
iconCls : 'search',
handler : function() {
alert("aaa");
}
}]
});
searchTbar.render(grid.tbar);
}
},
tbar : actionTbar,
bbar : new Ext.PagingToolbar({
pageSize : 20,
store : store,
displayInfo : true,
displayMsg : '当前显示第{0} - {1}条记录 共{2}条记录',
emptyMsg : "没有可显示的记录!"
})
});
var myLogLayOut = new Ext.Panel({
id : 'list-form-panel',
border : false,
title : '用户管理',
layout: 'fit',
items: [
grid,
{
id: 'detailPanel',
region: 'center',
bodyStyle: {
background: '#ffffff'
}
}
]
});
var action = new Ext.Action({
text : 'Action1',
handler : function() {
Ext.example.msg('Click', 'You clicked on "Action 1".');
},
iconCls : 'blist'
});
//var tb = myLogLayOut.getTopToolbar();
//tb.add('->', {
// text: 'Disable',
// handler: function(){
// action.setDisabled(!action.isDisabled());
// this.setText(action.isDisabled() ? 'Enable' : 'Disable');
// }
//}, {
// text: 'Change Text',
// handler: function(){
// Ext.Msg.prompt('Enter Text', 'Enter new text for Action 1:', function(btn, text){
// if(btn == 'ok' && text){
// action.setText(text);
// action.setHandler(function(){
// Ext.example.msg('Click','You clicked on "'+text+'".');
// });
// }
// });
// }
//}, {
// text: 'Change Icon',
// handler: function(){
// action.setIconClass(action.getIconClass() == 'blist' ? 'bmenu' : 'blist');
// }
//});