는 엽차

Question

에 그리드에 바닥 글을 추가하는 방법이 PurchaseReport.js으로 내보기 부분입니다

Ext.define("App.view.tabs.PurchaseReport", { 
extend: "Ext.panel.Panel", 
alias: "widget.PurchaseReportTab", 
requires: [ 
     "App.model.PurchaseReport", "Ext.toolbar.Toolbar" 
], 
border: false, 
layout: "fit", 
items: [ 
    App.Util.buildBrowseConfig({}, { 
     controller: "PurchaseReport", 
     primaryKeyField: "PurchaseReportId", 
     stateful: true, 
     stateId: "App.view.windows.PurchaseReport-grid", 

     columns: [ 
      { dataIndex: "PurchaseCost", filter: true, header: "Purchase Cost", width: 150 } 
     ], 
     features: [{ ftype: "filters", autoReload: false, local: true }], 
     store: { model: "App.model.PurchaseReport", sorters: [{ property: "Name", direction: "asc" }] } 
    }) 
] 

});

내 컨트롤러 파트는 내 눈금이 PurchaseReport.js로 바인딩됩니다. 그래서 여기를 변경해야합니까?

Ext.define("App.controller.tabs.PurchaseReport", { 
extend: "Ext.ux.app.BrowseController", 
views: ["tabs.PurchaseReport"], 
refs: [ 
    { 
     ref: "myPurchaseReportGrid", 
     selector: "PurchaseReportTab > gridpanel" 
    } 
], 

init: function() { 
    this.control({ 
     PurchaseReportTab: { 
      bind: function (a, c) { 
      **//Grid bind start** 
       var b = this.getMyPurchaseReportGrid(); 
       b.getSelectionModel().deselectAll(); 
       b.store.removeAll(); 
       b.fireEvent("bind", b, c) 
       **//Grid bind End** 

      **//Combobox Bind start** 
       var combo = this.getCoachCombo(), 
         store = combo.store, 
         options = store.lastOptions || {}; 
       options = Ext.apply({ 
        callback: function() { 
         combo.select(App.coach.CoachId) 
         //console.log("called rajesh"); 
        } 
       }, options); 
       store.load(options); 
       if (App.coach.IsAdmin) { 
        combo.show() 
       } 
       **//Combobox Bind end** 


       var abilities = App.coach.Abilities, 
         toolbar = this.getToolbar(); 
       for (var x = 0; x < abilities.length; x++) { 

        var ability = abilities[x], 
         button = toolbar.query("button[tooltip=" + ability.Name + "]"); 
        if (button.length) { 
         button[0].setVisible(true) 
        } 
       } 

      } 
     }, 

     "PurchaseReportTab > gridpanel": { 
      bind: this.bind, 
      itemdblclick: this.handleRecord, 
      selectionchange: this.selectionChange 
     } 


    }) 
} 

});

이 내 모델 부품 이름으로 PurchaseReport.js

Ext.define("App.model.PurchaseReport", { 
extend: "Ext.data.Model", 
fields: [ 
    { 
     name: "PurchaseDate", 
     type: "date" 
    } 
], 

proxy: { 
    type: "ajax", 
    url: "ControllerFactory.aspx", 
    extraParams: { 
     controller: "PurchaseReport", 
     operation: "GetPurchaseReportsByCoachIdAndDates" 
    }, 
    reader: { 
     type: "json", 
     root: "data", 
     successProperty: "success" 
    } 
} 

});

그리드보기에서 레코드를 표시 할 수 있지만 표시 할 수있는 바닥 글 영역이 필요합니다. 총 구매 금액입니다. 그리드의 바닥 글에

코드를 실수로 찾지 마라. 내가 더 익숙해 져서 더 자세한 정보가 필요하다는 것을 알려주기 위해 많은 것들을 삭제했다.

난 단지와하지에 한 페이지에 바닥 글을 표시 할

내가 같은 코드를 추가하는 시도했지만 GRIDVIEW 레코드를 표시되는 경우는 모든 페이지에서 바닥 글을 표시하고, 자세한 내용에 대한 그냥 이미지 또한 다른 페이지 및 구매 비용의 총 코드에서 bbar를 사용할 필요가 바닥 글을 삽입하기위한

Ext.define("Ext.grid.Panel", { 
extend: "Ext.panel.Table", 
requires: ["Ext.grid.View"], 
alias: ["widget.gridpanel", "widget.grid"], 
alternateClassName: ["Ext.list.ListView", "Ext.ListView", "Ext.grid.GridPanel"], 
viewType: "gridview", 
lockable: false, 
bothCfgCopy: ["invalidateScrollerOnRefresh", "hideHeaders", "enableColumnHide", "enableColumnMove", "enableColumnResize", "sortableColumns"], 
normalCfgCopy: ["verticalScroller", "verticalScrollDock", "verticalScrollerType", "scroll"], 
lockedCfgCopy: [], 
rowLines: true, 
    //Newly addded start 
height: 200, 
width: 400, 

bbar: [ 
     { 
     xtype: 'textfield', 
     name: 'Total', 
     fieldLabel: 'Total', 
     allowBlank: false 
     } 
      ], 
renderTo: Ext.getBody() 
//Newly addded end 
    }); 

Answer 1

있음에 표시해야합니다. 당신이 거기 그리드의 구성을 정의 코드에서는

샘플 예제를 작성해야 :

이

bbar: [ 
     { 
     xtype: 'textfield', 
     name: 'Total', 
     fieldLabel: 'Total', 
     allowBlank: false 
     } 
    ], 

더 나은 이해를 위해 Documentation을 읽어 보시기 바랍니다. 또한 나는 당신을 위해 바이올린을 만들어 프로젝트와 그리드를 상호 연관시킬 수 있습니다.

Answer 2

Fiddle는 으로보기에 바로 코드에 필요한 일부 특정 페이지의 gridview의 바닥 글을 추가하려면 (검토 의견 : //있는 gridview 아래 바닥 글을 추가하려면 특정 페이지 시작을위한)

Ext.define("App.view.tabs.PurchaseReport", { 
extend: "Ext.panel.Panel", 
alias: "widget.PurchaseReportTab", 
requires: [ 
    "App.model.PurchaseReport", "Ext.toolbar.Toolbar"], 
border: false, 
layout: "fit", 
items: [ 
    App.Util.buildBrowseConfig({}, { 
    controller: "PurchaseReport", 
    primaryKeyField: "PurchaseReportId", 
    stateful: true, 
    stateId: "App.view.windows.PurchaseReport-grid", 

    columns: [ 
     { dataIndex: "PurchaseCost", filter: true, header: "Purchase Cost", width: 150 } 
    ], 
    features: [{ ftype: "filters", autoReload: false, local: true }], 
    store: { model: "App.model.PurchaseReport", sorters: [{ property: "Name", direction: "asc" }], 
     //In order to add footer down to gridview for particular pages start 
     height: 200, 
     width: 400, 
     bbar: [ 
     { 
      dataIndex:"PurchaseCost", 
      xtype: 'textfield', 
      name: 'Total', 
      fieldLabel: 'Total', 
      allowBlank: false 
     } 
     ], 
     renderTo: Ext.getBody() 
     //In order to add footer down to gridview for particular pages end 
    } 
}) 
] 
}); 

Answer 3

아래 코드 사용

Ext.define('Ext.grid.feature.Summary', { 

/* Begin Definitions */ 

extend: 'Ext.grid.feature.AbstractSummary', 

alias: 'feature.summary', 

/* End Definitions */ 

/** 
* Gets any fragments needed for the template. 
* @private 
* @return {Object} The fragments 
*/ 
getFragmentTpl: function() { 
    // this gets called before render, so we'll setup the data here. 
    this.summaryData = this.generateSummaryData(); 
    return this.getSummaryFragments(); 
}, 

/** 
* Overrides the closeRows method on the template so we can include our own custom 
* footer. 
* @private 
* @return {Object} The custom fragments 
*/ 
getTableFragments: function(){ 
    if (this.showSummaryRow) { 
     return { 
      closeRows: this.closeRows 
     }; 
    } 
}, 

/** 
* Provide our own custom footer for the grid. 
* @private 
* @return {String} The custom footer 
*/ 
closeRows: function() { 
    return '</tpl>{[this.printSummaryRow()]}'; 
}, 

/** 
* Gets the data for printing a template row 
* @private 
* @param {Number} index The index in the template 
* @return {Array} The template values 
*/ 
getPrintData: function(index){ 
    var me = this, 
     columns = me.view.headerCt.getColumnsForTpl(), 
     i = 0, 
     length = columns.length, 
     data = [], 
     active = me.summaryData, 
     column; 

    for (; i < length; ++i) { 
     column = columns[i]; 
     column.gridSummaryValue = this.getColumnValue(column, active); 
     data.push(column); 
    } 
    return data; 
}, 

/** 
* Generates all of the summary data to be used when processing the template 
* @private 
* @return {Object} The summary data 
*/ 
generateSummaryData: function(){ 
    var me = this, 
     data = {}, 
     store = me.view.store, 
     columns = me.view.headerCt.getColumnsForTpl(), 
     i = 0, 
     length = columns.length, 
     fieldData, 
     key, 
     comp; 

    for (i = 0, length = columns.length; i < length; ++i) { 
     comp = Ext.getCmp(columns[i].id); 
     data[comp.dataIndex] = me.getSummary(store, comp.summaryType, comp.dataIndex, false); 
    } 
    return data; 
} 

});