ext 錨點導航欄
阿新 • • 發佈：2019-02-12
1，效果如圖
2，思路 將左側每一塊錨點內容區域的 reference 與 右側 的 導航欄的 每一個節點的 itemId 對應 點選導航欄節點的時候 獲取 響應的 錨點區域相對於容器頂部的距離 然後設定視窗的滾動距離
3，主要程式碼
4，控制器/** * Created by Sukla on 2017/12/6. */ Ext.define('app.view.common.anchorNav', { extend: 'Ext.Container', alias: 'widget.anchor-nav', controller:'anchornavcontroller', layout: { type: 'border' }, viewModel: { data: { progressvalue: 0.8, companyname: '標題', imgsrc:'resources/images/khjz/company/sukla.jpg' } }, items: [ { region: 'north', height: 120, layout: { type: 'vbox', align: 'stretch' }, items: [ { height: 70, layout: { type: 'hbox' }, items: [ { width: 250, margin: '20 0 0 10', layout: { type: 'hbox', align: 'stretch' }, items: [ { xtype: 'textfield', flex: 1, emptytext: '請輸入檢索條件' }, { xtype: 'button', width: 70, text: '查詢' } ] }, { flex: 1 }, { width: 160, margin: '15 10 0 0', layout: { type: 'vbox', align: 'stretch' }, items: [ { xtype: 'label', text: '資料完善比例' }, { xtype: 'progressbarwidget', bind: { value: '{progressvalue}' }, textTpl: [ '{percent:number("0")}%' ] } ] } ] }, { height: 50, cls: 'myanchor-company-title', bind: { html: '{companyname}' } } ] }, { region: 'east', scrollable:true, width: 160, cls: 'myanchor-nav-btn-view ', defaults: { layout: { type: 'vbox', align: 'stretch' } }, items: [ { items: [ { xtype: 'button', textAlign: 'left', cls: 'my-goto-anchor-btn myanchor-item-btn', handler:'goToAnchor', text: '1 點選到錨點', itemId:'myanchor-item-001' }, { layout: { type: 'vbox', align: 'stretch' }, defaults: { xtype: 'button', text: '1 錨點', textAlign: 'left', cls: 'my-goto-anchor-btn', handler:'goToAnchor' }, items: [ { text:'1.1 點選到錨點', itemId:'myanchor-leaf-item-101' }, { text:'1.2 點選到錨點', itemId:'myanchor-leaf-item-102' }, { text:'1.3 點選到錨點', itemId:'myanchor-leaf-item-103' }, { text:'1.4 點選到錨點', itemId:'myanchor-leaf-item-104' } ] } ] }, { items: [ { xtype: 'button', textAlign: 'left', cls: 'my-goto-anchor-btn myanchor-item-btn', handler:'goToAnchor', text: '2 點選到錨點', itemId:'myanchor-item-002' }, { layout: { type: 'vbox', align: 'stretch' }, defaults: { xtype: 'button', text: '1 錨點', textAlign: 'left', cls: 'my-goto-anchor-btn', handler:'goToAnchor' }, items: [ { text:'2.1 點選到錨點', itemId:'myanchor-leaf-item-201' }, { text:'2.2 點選到錨點', itemId:'myanchor-leaf-item-202' }, { text:'2.3 點選到錨點', itemId:'myanchor-leaf-item-203' } ] } ] }, { items: [ { xtype: 'button', textAlign: 'left', cls: 'my-goto-anchor-btn myanchor-item-btn', handler:'goToAnchor', text: '3 點選到錨點', itemId:'myanchor-item-003' }, { layout: { type: 'vbox', align: 'stretch' }, defaults: { xtype: 'button', text: '1 錨點', textAlign: 'left', cls: 'my-goto-anchor-btn', handler:'goToAnchor' }, items: [ { text:'3.1 點選到錨點', itemId:'myanchor-leaf-item-301' }, { text:'3.2 點選到錨點', itemId:'myanchor-leaf-item-302' } ] } ] }, { items: [ { xtype: 'button', textAlign: 'left', cls: 'my-goto-anchor-btn myanchor-item-btn', handler:'goToAnchor', text: '4 點選到錨點', itemId:'myanchor-item-004' }, { layout: { type: 'vbox', align: 'stretch' }, defaults: { xtype: 'button', text: '1 錨點', textAlign: 'left', cls: 'my-goto-anchor-btn', handler:'goToAnchor' }, items: [ { text:'4.1 點選到錨點', itemId:'myanchor-leaf-item-401' }, { text:'4.2 點選到錨點', itemId:'myanchor-leaf-item-402' }, { text:'4.3 點選到錨點', itemId:'myanchor-leaf-item-403' }, { text:'4.4 點選到錨點', itemId:'myanchor-leaf-item-404' }, { text:'4.5 點選到錨點', itemId:'myanchor-leaf-item-405' }, { text:'4.6 點選到錨點', itemId:'myanchor-leaf-item-406' } ] } ] } ] }, { region: 'center', reference:'anchorcenter', scrollable:true, defaults:{ layout: { type: 'vbox', align: 'stretch' } }, items: [ { reference:'myanchor-item-001', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'1' } }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h3 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h3>' } }, { flex: 1 } ] }, { padding:'10 0 0 30', defaults:{ layout: { type: 'vbox', align: 'stretch' }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>' } }, { flex: 1 }, { width: 70, xtype: 'button', bind:{ text: '編輯{myanchorindex}' } } ] }, { height:200, bind:{ html:'{myanchorindex}' } } ] }, items: [ { reference:'myanchor-leaf-item-101', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'1.1' } }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>' } }, { flex: 1 }, { width: 70, xtype: 'button', bind:{ text: '編輯{myanchorindex}' } } ] }, { layout:{ type:'hbox', align:'stretch' }, padding:10, items:[ { width:100, bind:{ html: '<img style="display:block;margin:0 auto;width:100%;height:100px" src = "{imgsrc}">' } }, { xtype:'form', flex:1, layout:{ type:'table', columns:3, tableAttrs: { style: { width: '100%' } } }, defaults:{ xtype:'textfield', fieldLabel:'欄位', labelAlign:'right', labelWidth:70, width:'100%' }, items:[ { fieldLabel:'欄位' },{ fieldLabel:'欄位' },{ fieldLabel:'欄位' }, { fieldLabel:'欄位' },{ fieldLabel:'欄位' },{ fieldLabel:'欄位' }, { fieldLabel:'欄位' },{ fieldLabel:'欄位', colspan:2 }, { fieldLabel:'欄位', colspan:2 },{ fieldLabel:'欄位' }, { fieldLabel:'欄位', colspan:3 } ] } ] } ] }, { reference:'myanchor-leaf-item-102', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'1.2' } }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>' } }, { flex: 1 }, { width: 70, xtype: 'button', bind:{ text: '編輯{myanchorindex}' } } ] }, { layout:{ type:'hbox', align:'stretch' }, padding:10, items:[ { width:100, bind:{ html: '<img style="display:block;margin:0 auto;width:100%;height:100px" src = "{imgsrc}">' } }, { xtype:'form', flex:1, layout:{ type:'table', columns:3, tableAttrs: { style: { width: '100%' } } }, defaults:{ xtype:'textfield', fieldLabel:'欄位', labelAlign:'right', labelWidth:70, width:'100%' }, items:[ { fieldLabel:'欄位' },{ fieldLabel:'欄位' },{ fieldLabel:'欄位' }, { fieldLabel:'欄位' },{ fieldLabel:'欄位' },{ fieldLabel:'欄位' }, { fieldLabel:'欄位' },{ fieldLabel:'欄位', colspan:2 }, { fieldLabel:'欄位', colspan:2 },{ fieldLabel:'欄位' }, { fieldLabel:'欄位', colspan:3 } ] } ] } ] }, { reference:'myanchor-leaf-item-103', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'1.3' } }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>' } }, { flex: 1 }, { width: 70, xtype: 'button', bind:{ text: '編輯{myanchorindex}' } } ] }, { layout:{ type:'hbox', align:'stretch' }, padding:10, items:[ { width:100, bind:{ html: '<img style="display:block;margin:0 auto;width:100%;height:100px" src = "{imgsrc}">' } }, { xtype:'form', flex:1, layout:{ type:'table', columns:3, tableAttrs: { style: { width: '100%' } } }, defaults:{ xtype:'textfield', fieldLabel:'欄位', labelAlign:'right', labelWidth:70, width:'100%' }, items:[ { fieldLabel:'欄位' },{ fieldLabel:'欄位' },{ fieldLabel:'欄位' }, { fieldLabel:'欄位' },{ fieldLabel:'欄位' },{ fieldLabel:'欄位' }, { fieldLabel:'欄位' },{ fieldLabel:'欄位', colspan:2 }, { fieldLabel:'欄位', colspan:2 },{ fieldLabel:'欄位' }, { fieldLabel:'欄位', colspan:3 } ] } ] } ] }, { reference:'myanchor-leaf-item-104', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'1.4' } }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>' } }, { flex: 1 }, { width: 70, xtype: 'button', bind:{ text: '編輯{myanchorindex}' } } ] }, { layout:{ type:'hbox', align:'stretch' }, padding:10, items:[ { width:100, bind:{ html: '<img style="display:block;margin:0 auto;width:100%;height:100px" src = "{imgsrc}">' } }, { xtype:'form', flex:1, layout:{ type:'table', columns:3, tableAttrs: { style: { width: '100%' } } }, defaults:{ xtype:'textfield', fieldLabel:'欄位', labelAlign:'right', labelWidth:70, width:'100%' }, items:[ { fieldLabel:'欄位' },{ fieldLabel:'欄位' },{ fieldLabel:'欄位' }, { fieldLabel:'欄位' },{ fieldLabel:'欄位' },{ fieldLabel:'欄位' }, { fieldLabel:'欄位' },{ fieldLabel:'欄位', colspan:2 }, { fieldLabel:'欄位', colspan:2 },{ fieldLabel:'欄位' }, { fieldLabel:'欄位', colspan:3 } ] } ] } ] } ] } ] }, { reference:'myanchor-item-002', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'2' } }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h3 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h3>' } }, { flex: 1 } ] }, { padding:'10 0 0 30', defaults:{ layout: { type: 'vbox', align: 'stretch' }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>' } }, { flex: 1 }, { width: 70, xtype: 'button', bind:{ text: '編輯{myanchorindex}' } } ] }, { height:200, bind:{ html:'{myanchorindex}' } } ] }, items: [ { reference:'myanchor-leaf-item-201', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'2.1' } } }, { reference:'myanchor-leaf-item-202', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'2.2' } } }, { reference:'myanchor-leaf-item-203', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'2.3' } } } ] } ] }, { reference:'myanchor-item-003', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'3' } }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h3 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h3>' } }, { flex: 1 } ] }, { padding:'10 0 0 30', defaults:{ layout: { type: 'vbox', align: 'stretch' }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>' } }, { flex: 1 }, { width: 70, xtype: 'button', bind:{ text: '編輯{myanchorindex}' } } ] }, { height:200, bind:{ html:'{myanchorindex}' } } ] }, items: [ { reference:'myanchor-leaf-item-301', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'3.1' } } }, { reference:'myanchor-leaf-item-302', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'3.2' } } } ] } ] }, { reference:'myanchor-item-004', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'4' } }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h3 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h3>' } }, { flex: 1 } ] }, { padding:'10 0 0 30', defaults:{ layout: { type: 'vbox', align: 'stretch' }, items: [ { cls: 'myanchor-center-item', layout: { type: 'hbox', align: 'stretch' }, height: 30, items: [ { width: 250, bind:{ html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>' } }, { flex: 1 }, { width: 70, xtype: 'button', bind:{ text: '編輯{myanchorindex}' } } ] }, { height:200, bind:{ html:'{myanchorindex}' } } ] }, items: [ { reference:'myanchor-leaf-item-401', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'4.1' } } }, { reference:'myanchor-leaf-item-402', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'4.2' } } }, { reference:'myanchor-leaf-item-403', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'4.3' } } }, { reference:'myanchor-leaf-item-404', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'4.4' } } }, { reference:'myanchor-leaf-item-405', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'4.5' } } }, { reference:'myanchor-leaf-item-406', viewModel:{ data:{ myanchortitle:'錨點', myanchorindex:'4.6' } } } ] } ] } ] } ] })
/** * Created by Sukla on 2017/12/6. */ Ext.define('app.view.common.anchorNav.AnchorNavController',{ extend:'Ext.app.ViewController', alias: 'controller.anchornavcontroller', goToAnchor: function (btn) { var targetTop = 0; var isleaf=btn.itemId.split('-leaf-').length==2?true:false; if (this.getView().lookupReference(btn.itemId)) { targetTop = this.getView().lookupReference(btn.itemId).el.dom.offsetTop; if(isleaf){ targetTop+=this.getView().lookupReference(btn.itemId).ownerCt.ownerCt.el.dom.offsetTop; } } console.log(targetTop); var scrollId = this.getView().lookupReference('anchorcenter').el.dom.id + '-body'; document.getElementById(scrollId).scrollTop = targetTop; }
5，樣式表
//錨點導航 .myanchor-nav-btn-view { padding: 20px 0 0 0 !important; background-color: #fff !important; background-image: url(images/khjz/icon-line-bg.png) !important; background-size: 9px 9px; background-repeat: repeat-y; background-position: 30px 20px; } .my-goto-anchor-btn { height:30px; padding: 0 0 0 55px !important; background-color: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: #333 !important; background-image: url(images/khjz/my-goto-anchor.gif) !important; background-size: 40px 20px; background-repeat: no-repeat; background-position: 0 center; } .my-goto-anchor-btn.x-btn-focus { background-image: url(images/khjz/my-goto-anchor-focus.gif) !important; } .my-goto-anchor-btn .x-btn-inner { color: inherit; } .myanchor-item-btn .x-btn-inner { font-weight: bold; font-size: 14px; margin-left: -12px; } .myanchor-nav-btn-view .x-panel-body-default, .myanchor-company-title .x-panel-body-default { background-color: transparent !important; } .myanchor-company-title .x-panel-body-default { font-size: inherit; font-weight: inherit; } .myanchor-company-title { background-color: #efefef !important; text-align: center; line-height: 50px; font-size: 20px !important; font-weight: bold !important; } .myanchor-center-item .myanchor-item-title { margin: 0; padding: 0; font-weight: bold; line-height: 30px; } .myanchor-center-item .myanchor-item-title span { display: inline-block; background-color: dodgerblue; color: #ffffff; margin-right: 10px; min-width: 30px; text-align: center; } /* 設定滾動條的樣式 */ ::-webkit-scrollbar{ width:10px; } /* 滾動槽 */ ::-webkit-scrollbar-track { background:#fff; } /* 滾動條滑塊 */ ::-webkit-scrollbar-thumb { border-radius:2px; background:#e1edec; } ::-webkit-scrollbar-thumb:window-inactive { background:#e1edec; }