ext T型格局

2012-11-09

ext T型布局Ext.onReady(function(){?Ext.QuickTips.init()??var tbarArray [{??text : 新增,??toolt

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.
?* licensing@sencha.com
?* 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) {
????
???}
??}
?}
});

//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');
//??? }
//});

热点排行

编程

ext T型格局