paging: 2nd page not working. - Ext JS

本文讨论了在使用ExtJS框架时遇到的问题:如何在分页操作中正确传递额外参数(如表名)到服务器端。作者分享了自己的代码实现,并通过社区交流找到了解决方案,包括设置`baseParams`来确保每次请求都包含必要的参数。
I hate to post what is no doubt something totally obvious, yet after going through the examples and forums I can't find a solution.

In my grid I have an extra parameter (table) that holds, obviously, the table name. This works fine for the first page, but when I use the paging toolbar this value is not sent. I've tried putting this parameter into the PagingToolbar but it doesn't ever seem to see it. Everything else works fine, if I hard code the table name then paging works fine, but I want it to be flexible. Can someone look at my code and tell me what I'm missing please.

//grid1.js 
var myGrid = function() { 
   return { 
      init: function() { 
         
         //we enable the QuickTips for the later Pagebar 
		Ext.QuickTips.init(); 

		// create the Data Store 
		var ds = new Ext.data.Store({ 
		   proxy: new Ext.data.HttpProxy({url: 'grid1_data.asp'}), 
		   reader: new Ext.data.JsonReader({ 
		      root: 'myFriends', 
		      totalProperty: 'totalCount', 
		      id: 'id' 
		   }, 
		   [ 
		   {name: 'ID', mapping: 'id', type: 'int'}, 
		   {name: 'Name', mapping: 'name', type: 'string'}, 
		   {name: 'Sector', mapping: 'sectorName', type: 'string'}
		   ]), 
		   // turn on remote sorting 
		   remoteSort: true 
		}); 
		//we set the deafault sort to the id ascending 
		ds.setDefaultSort('ID', 'asc'); 

		// now we create the Grid Columns 
		var cm = new Ext.grid.ColumnModel([ 
		   {header: "ID", dataIndex: 'ID', hidden:true}, 
		   {header: "Name", dataIndex: 'Name', width: 100, sortable: true}, 
		   {header: "Sector", dataIndex: 'Sector', width: 140, sortable: true}
		]); 
		// by default columns are sortable 
		cm.defaultSortable = true; 

		// create the grid 
		var grid = new Ext.grid.Grid('tutorial-grid', { 
		   ds: ds, 
		   cm: cm, 
		   selModel: new Ext.grid.RowSelectionModel({singleSelect:true}), 
		   enableColLock:true    
		}); 
		// render the Grid 
		grid.render();
		
		var gridFoot = grid.getView().getFooterPanel(true); 
		// add a paging toolbar to the grid's footer 
		var paging = new Ext.PagingToolbar(gridFoot, ds, {pageSize: 100});

		ds.load({params:{start:0, limit:100, table:'asset'}});
         
      } 
    }; 
}(); 
Ext.EventManager.onDocumentReady(myGrid.init, myGrid, true);
Unrelated, documentation question. As you can see from my code the ID field is hidden. I just guessed this value and it worked (hurrah for common sense). But I don't actually know where the different options for the columns are documented. I've gone through most of the grid documentation and I can't find it. width, renderer, sortable, resizable, locked, etc, etc it's easy enough to work them all out from the examples and such, but where are they in the documentation? I'm sure i'm missing something incredibly obvious...

Thanks.

Thanks.
Reply With Quote
  # 2  
Old 03-15-2007, 01:30 PM
Default

The parameters in load are only used for that one load. Use ds.baseParams = {table: 'asset'} (either as given or in the config).
Reply With Quote
  # 3  
Old 03-15-2007, 02:07 PM
Default

Attach a listener to the beforeload event for the datastore.

          ds.on('beforeload', function() {
            ds.baseParams = {
              sort: cm.getIndexById(ds.sortInfo.field) * ((ds.sortInfo.direction.toUpperCase() == 'DESC') ? -1 : 1)
            , search: search.getValue()
            };
          });
Reply With Quote
  # 4  
Old 03-15-2007, 03:51 PM
Default

I did it this way (see "setFilter"). Mabye someone can comment on this if it is the wrong to do, but it works out quite well:
myGrid = function() {
    var grid; //grid itself
    var ds; // datastore

    return {
        init : function() {
...

        ds = new Ext.data.Store({
            // load a simple http proxy
            proxy: new Ext.data.HttpProxy({
                url: 'resp_calls.php'
            }),
            reader: reader,
            // turn on remote sorting
            remoteSort: true
        });
...
        }, // end init

        // pass over add. param for XHR request
        setFilter: function(afilter) {
          ds.baseParams = afilter;
          return true;
        }

  } // end return
}(); // endfunction myGrid
Usage:
myGrid.setFilter({table: 'asset'});
or///
myGrid.setFilter({table: 'asset', chair: 'asset2'});
Reply With Quote
  # 5  
Old 03-15-2007, 07:04 PM
Default

Yes, that's certainly one way of doing it. It's important to understand that the baseParams aren't going to be dynamic (change, as needed, for every new XHR request that's generated for the grid), but each XHR request will use whatever state the baseParams is currently in.
Reply With Quote
<template> <c-modal v-model:open="open" title="" @ok="handleOrderOk" width="1600px" :footer="null"> <div style="padding-bottom: 15px"> <a-button key="back" @click="handleCancel" v-if="isFooter">取消</a-button> <a-button key="print" @click="handlePrint">打印</a-button> </div> <div id="printJS-form"> <div v-for="(item, index) in formState" :key="index"> <div class="order-container print-container-div" > <div class="printable-area widthClass"> <table class="widthClass"> <tr style="height: 30px"> <td style="width: 15%;" rowspan="2"></td> <td colspan="4" rowspan="2" style="font-size: 24px;font-weight: 800">FERRITE CONTENT REPORT</td> <td style="width: 15%;">Report No</td> </tr> <tr style="height: 30px"> <td style="width: 15%;"></td> </tr> </table> <table class="widthClass" style="font-size: 16px;font-weight: 400;border-top: 0"> <tr style="height: 30px;"> <td style="width: 15%;">Project</td> <td style="width: 20%;"></td> <td style="width: 15%;">Discipline</td> <td style="width: 10%;">Piping</td> <td style="width: 10%;">Insp. Date</td> <td style="width: 30%;"></td> </tr> <tr style="height: 30px;"> <td style="width: 15%;">Dep't</td> <td style="width: 20%;">CIMC QMD - YCRO</td> <td style="width: 15%;">Team</td> <td colspan="3"></td> </tr> </table> <table class="widthClass" style="font-size: 16px;font-weight: 400;border-top: none;border: none"> <tr style="height: 30px;border-top: none;border: none"> <td style="width: 15%;">Inspector</td> <td style="width: 20%;">Zhang Luning</td> <td style="width: 15%;">Inspection Place</td> <td style="width: 20%;">WORKSHOP CENTER</td> <td style="width: 15%;">Material</td> <td style="width: 20%;">S31803</td> </tr> <tr style="height: 30px;"> <td style="width: 15%;">Procedure No</td> <td style="width: 20%;">I-PR-3010.2S-1351-970-YCT-004</td> <td style="width: 15%;">Equip. Name</td> <td style="width: 20%;">FERITSCOPE FMP30</td> <td style="width: 15%;">Serial NO</td> <td style="width: 20%;">100020024</td> </tr> </table> </div> </div> <div style="page-break-after:always"></div> </div> </div> </c-modal> </template> <script setup> import { ref, reactive } from "vue" import { print } from "@/utils/print" import * as server from "@/packages/piping/api/cpin"; const open = ref(false) const title = ref() const initType = ref() const totalWeight = ref(0) const formState = ref({}) const pipeNum = ref(0) const isFooter = ref(true) const orderTableState = reactive({ datasource: [] }) const handleOrderOk = () => {} const init = (type, data) => { initType.value = type isFooter.value = type === "galv" console.log("data2", data) let printDatas = [] // 使用 Promise.all 等待所有异步操作完成 Promise.all(data.map(async (dataItem) => { try { const res = await server.getOrderList({ page: 0, size: 10000, orderNo: dataItem.orderNo }) let item = res.data.content[0] || {} item.title = (item.projectNo || '') + "外检单" let weight = 0 if (item.pipeList && Array.isArray(item.pipeList)) { item.pipeList.forEach((pipe) => { if (pipe.weight) { weight += pipe.weight } }) } item.totalWeight = weight.toFixed(2) + 'KG' item.pipeList.forEach((pipe, index) => { pipe.indexNum = index + 1 }) // item.indexNum = index + 1 pipeNum.value = item.pipeList ? item.pipeList.length : 0 return item } catch (error) { console.error("获取订单列表失败:", error) return {} } })).then(results => { printDatas = results console.log("data1", data) formState.value = printDatas }) } const handleCancel = () => { open.value = false } const handlePrint = () => { print({ // mediaPrint:false, // noPrintSelector:'avoid-this', type: "html", printable: "printJS-form", // type: "raw-html", // printable: "test-dom", // scanStyles: false, // noHeadersAndFooters:true, maxWidth: 1500, targetStyles: ["*"], scanStyles: false, style: ` table{font-size:3px} td{font-size:10px !important} .print-container-div{ width: 1100px !important; } .widthClass{ width: 1000px; font-size:1px } .ant-descriptions-view >table{ width:100%!important; font-size:1px; } @media print { a[href]:after { content: none !important; } #footer { display: none; } } .imgInline{ display: flex;} .order-top-QRCode{float:right} .order-top-title { width: 100%; height: 50px; text-align: center; display: flex; padding-top:15px } .order-top-logo { img { margin-top:10px; width: 150px; position: absolute; left: 0; } } .order-top-titles { font-size: 25px; font-weight: bold; width: 100%; margin: 0; align:center; text-align:center; padding-top:15px; } .order-top-vice-title { width: 100%; } .logo{width:150px;height:20px} .paging{page-break-after: aways;} .order-container { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; .order-top { width: 100%; display: flex; justify-content: center; position: relative; margin-bottom: 38px; .order-top-title { width: 40%; height: 50px; text-align: center; display: flex; .order-top-logo { img { width: 150px; position: absolute; left: 0; } } .order-top-titles { font-size: 25px; font-weight: bold; width: 100%; margin: 0; } .order-top-vice-title { width: 100%; } } } .order-top-QRCode { position: absolute; right: 0; top: 0; display: flex; align-items: center; justify-content: flex-end; } .order-mid { width: calc(100%); padding-top: 15px; } .order-mod { width: calc(100% ); .order-mod-left{ width: 49%; padding: 5px 0; border-radius: 10px; background: #eef0f3; } .order-mod-right { width: 49%; padding: 5px 0; border-radius: 10px; background: #eef0f3; } .order-mod-title { //border: 1px solid #3981ee; padding: 5px; //color: #3981ee; width: 50%; display: flex; align-items: center; justify-content: center; margin: 10px auto; background: #fff; border-radius: 7px; } .order-mod-content { display: flex; align-items: center; width: 100%; margin: 10px auto; .order-mod-content-title { width: 30%; text-align: right; padding: 5px 0; } .order-mod-content-content { flex: 1; white-space: nowrap; } } } .order-bot { width: 100%; margin-top: 10px; } .order-table { //border: 1px solid black !important; // transform: scale(0.7); //width: calc(100% / 0.7); // transform-origin: top center; } } :deep(.ant-descriptions) { .ant-descriptions-item-label { white-space: nowrap; width: 20px; border: 1px solid black !important; } .ant-descriptions-item-content { white-space: nowrap; border: 1px solid black !important; } } .ant-modal .ant-modal-body{font-size:9px} :deep(.c-table-wrap) { .ant-table-container { table { //padding-bottom: 80px; } .ant-table-cell{ border: 1px solid black !important; padding: 12px 8px; } .ant-table-cell-ellipsis { border-color: black !important; border: 1px; padding: 12px 8px; } } } .order-container { width: 100%; } thead { display: table-header-group; } .order-top, .order-mid, .order-mod, .order-bot, .order-table { page-break-inside: avoid; } td{text-align: center;border: 1px solid #000;} th{ text-align: center;border: 1px solid #000;} .ant-table-row{ page-break-inside: avoid; } td{text-align: center;border: 1px solid #000;} tr {page-break-inside: avoid;} th{ text-align: center;border: 1px solid #000;} table { border-collapse: collapse;} table tr th, table tr td { border: 1px solid #000!important; } .print-container { transform: scale(0.8); transform-origin: top left; width: 100%; } //@page{size:auto} //.paging{page-break-after: always;} } ` }) } defineExpose({ init, open }) window.onbeforeprint = function () { var links = document.getElementsByTagName("a") for (var i = 0; i < links.length; i++) { links[i].setAttribute("data-href", links[i].href) links[i].removeAttribute("href") } } window.onafterprint = function () { var links = document.getElementsByTagName("a") for (var i = 0; i < links.length; i++) { links[i].href = links[i].getAttribute("data-href") links[i].removeAttribute("data-href") } } </script> <style lang="less" scoped> .order-container { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; .order-top { width: 100%; display: flex; justify-content: center; position: relative; margin-bottom: 38px; .order-top-title { width: 40%; height: 50px; text-align: center; display: flex; .order-top-logo { img { width: 150px; position: absolute; left: 0; } } .order-top-titles { font-size: 25px; font-weight: bold; width: 100%; margin: 0; } .order-top-vice-title { width: 100%; } } } .order-top-QRCode { position: absolute; right: 0; top: 0; display: flex; align-items: center; justify-content: flex-end; } .order-mid { width: calc(100%); padding-top: 15px; } .order-mod { width: calc(100%); .order-mod-left { width: 49%; padding: 5px 0; border-radius: 10px; background: #eef0f3; } .order-mod-right { width: 49%; padding: 5px 0; border-radius: 10px; background: #eef0f3; } .order-mod-title { //border: 1px solid #3981ee; padding: 5px; //color: #3981ee; width: 50%; display: flex; align-items: center; justify-content: center; margin: 10px auto; background: #fff; border-radius: 7px; } .order-mod-content { display: flex; align-items: center; width: 100%; margin: 10px auto; .order-mod-content-title { width: 30%; text-align: right; padding: 5px 0; } .order-mod-content-content { flex: 1; white-space: nowrap; } } } .order-bot { width: 100%; margin-top: 10px; } .order-table { //border: 1px solid black !important; // transform: scale(0.7); //width: calc(100% / 0.7); // transform-origin: top center; } } :deep(.ant-descriptions) { .ant-descriptions-item-label { white-space: nowrap; width: 20px; border: 1px solid black !important; } .ant-descriptions-item-content { white-space: nowrap; border: 1px solid black !important; } } :deep(.c-table-wrap) { .ant-table-container { table { //padding-bottom: 80px; } .ant-table-cell { border: 1px solid black !important; padding: 12px 8px; } .ant-table-cell-ellipsis { border-color: black !important; border: 1px; padding: 12px 8px; } } } .order-container { width: 100%; } thead { display: table-header-group; } .order-top, .order-mid, .order-mod, .order-bot, .order-table { page-break-inside: avoid; } .order-mod-title { } td { text-align: center; border: 1px solid #000; } th { text-align: center; border: 1px solid #000; } @media print { a[href]:after { content: none !important; } #footer { display: none; } tr { page-break-inside: avoid; } } .ant-table-row { page-break-inside: avoid; } td { text-align: center; border: 1px solid #000; } tr { page-break-inside: avoid; } th { text-align: center; border: 1px solid #000; } table { border-collapse: collapse; } table tr th, table tr td { border: 1px solid #000 !important; } .ant-descriptions-item-label { white-space: nowrap !important; } .print-container { transform: scale(0.8); transform-origin: top left; width: 100%; } //@page{size:auto} //.paging{page-break-after: always;} .numbers { font-family: "Arial", sans-serif; /* 或其他不支持自动转换的字体 */ } div { font-family: "Arial", sans-serif; /* 或其他不支持自动转换的字体 */ } .widthClass { width: 1500px !important; } .print-container-div { width: 1500px !important; } </style> 这里去掉上边框没效果<table class="widthClass" style="font-size: 16px;font-weight: 400;border-top: none;border: none">
10-31
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值