ステップ 1 |
コンテンツの表示に使用するグリッドの列および外観の配列を定義します。
例:
displayList = [
{id: 'id', header: 'Id', width: 50, sortable: true, dataIndex: 'serviceId'},
{header:'Service Id',dataIndex: 'serviceId',hidden:true},
{header:'Service Name',dataIndex: 'serviceName'},
{header:'Description',dataIndex: 'description'},
{header:'Top Description',dataIndex: 'topDescription',hidden:true},
{header:'Middle Description',dataIndex: 'middleDescription',hidden:true},
{header:'Bottom Description',dataIndex: 'bottomDescription',hidden:true},
{header:'Pricing Scheme',dataIndex: 'pricingScheme',hidden:true},
{header:'Revision Number',dataIndex: 'revisionNumber',hidden:true},
{header:'Status',dataIndex: 'status'},
{header:'Status Id',dataIndex: 'statusId',hidden:true},
{header:'Expected Duration',dataIndex: 'expectedDuration',hidden:true},
{header:'Expected Duration Units',dataIndex: 'expectedDurationUnits',hidden:true},
{header:'Price',dataIndex: 'price',hidden:true},
{header:'Price Display Schema Id',dataIndex: 'priceDisplaySchemaId',hidden:true},
{header:'Price Description',dataIndex: 'priceDescription',hidden:true},
{header:'Can Start Later',dataIndex: 'canStartLater',hidden:true},
{header:'Is Bundle',dataIndex: 'isBundle',hidden:true},
{header:'Date Quality Id',dataIndex: 'dateQualityId',hidden:true},
{header:'Service Level Description',dataIndex: 'serviceLevelDescription',hidden:true},
{header:'Is Orderable',dataIndex: 'isOrderable',hidden:true},
{header:'Is Reportable',dataIndex: 'isReportable',hidden:true},
{header:'Service URL',dataIndex: 'serviceURL'}
];
|
ステップ 2 |
前述の手順で定義した列の配列およびデータ ストアを使用して、EXTJS グリッドを作成します。
例:
var grid = new Ext.grid.GridPanel({
store : store,
columns : displayList,
renderTo : '#divName#',
width : "100%",
autoHeight : true,
layout : 'fit',
viewConfig : {
forceFit : true
},
tbar : [combo,filterButton],
bbar : [new Ext.PagingToolbar({
store : store,
displayInfo : true,
pageSize : 5,
params:{
startRow: 1,
recordSize: 5
}
emptyMsg : "No record found"
})]
}); |