J'ai une application moderne ExtJS 6.2.0. Il y a une grille avec 9 colonnes.
Y a-t-il un moyen d'atténuer les colonnes pour le rendre suffisamment large pour que le contenu complet de la cellule montrent? Ou quelles sont les meilleures pratiques quand il s'agit de grilles sur mobile avec de nombreuses colonnes?
3 Réponses :
Utilisez Flex pour cela, vous pouvez le combiner avec de la largeur:
xtype: 'gridpanel',
width: 500,
columns: [{
dataindex: 'id',
width: 125
},{
dataindex: 'username',
width: 75
},{
dataindex: 'lastname',
flex: 1
},{
dataindex: 'firstname',
flex: 2
}]
Autoposition 9 colonnes sur une grille peut être effectuée en ajoutant Voici un Fiddle Sencha peut vous aider à voir comment Flex fonctionne.
flex: 1 à tous. Cela fera que chaque grille ait une largeur uniforme à toutes les colonnes. Si vous souhaitez que certaines colonnes affichent plus que d'autres, vous pouvez modifier la valeur flexible sur un nombre plus élevé de 2 ou 3. Si vous ne voulez pas que les ellipses affichent lorsque le texte débordne et que vous souhaitez voir le texte intégral, Vous pouvez ajouter une classe à la grille et définir .x-gridcell-cornom-el pour ne pas avoir un espace blanc.
Toolkit moderne n'a pas de fonction d'autosse de colonne. Voici un moyen de le faire à l'aide de la fonction de rendu et de la toile HTML5, ce n'est pas idéal mais cela fonctionne
var store = Ext.create("Ext.data.Store",{
autoLoad:true,
fields: [
'id', 'description',''
],
data: [
{
"_id": "5cc2e64bb00a9f2c8756b835",
"index": 0,
"guid": "fcc7160d-da75-45f4-8f38-3a713f5c44c3",
"isActive": false,
"balance": "$2,866.91",
"picture": "http://placehold.it/32x32",
"age": 24,
"eyeColor": "brown",
"name": "Erica Simmons",
"gender": "female",
"company": "BOILCAT",
"email": "ericasimmons@boilcat.com",
"phone": "+1 (858) 557-2672",
"address": "355 Williams Place, Northchase, North Dakota, 105",
"about": "Enim laborum eiusmod exercitation ullamco culpa consectetur. Nisi eiusmod ad laboris do amet aliqua nostrud anim fugiat ut sit dolor deserunt voluptate. Adipisicing consectetur mollit exercitation deserunt est adipisicing ut et ipsum eiusmod irure aliquip dolore. Eiusmod fugiat ex proident id exercitation incididunt. Officia culpa sint elit commodo nisi ipsum mollit. Ea sunt irure aute ullamco in quis nostrud reprehenderit proident. Incididunt quis pariatur est ipsum incididunt aliqua do non nisi mollit ut reprehenderit.\r\n",
"registered": "2018-05-02T08:40:59 +04:00",
"latitude": 72.141529,
"longitude": 177.9731
},
{
"_id": "5cc2e64bc3c65ddbac68a632",
"index": 1,
"guid": "57efe8bb-fe43-43ae-bfc4-93097033229a",
"isActive": false,
"balance": "$2,140.56",
"picture": "http://placehold.it/32x32",
"age": 39,
"eyeColor": "blue",
"name": "Haynes Fletcher",
"gender": "male",
"company": "DYNO",
"email": "haynesfletcher@dyno.com",
"phone": "+1 (965) 592-2046",
"address": "686 Seba Avenue, Convent, Idaho, 4320",
"about": "Nisi eiusmod eiusmod anim deserunt officia et excepteur laborum anim dolor sunt commodo sint consequat. Ipsum ut et non veniam exercitation non cillum dolore. Officia incididunt magna tempor reprehenderit voluptate dolor quis velit nulla in amet aliquip reprehenderit quis. Velit culpa nostrud tempor elit deserunt eiusmod. Ipsum qui enim sint nisi adipisicing sunt Lorem culpa velit anim consectetur.\r\n",
"registered": "2019-01-14T04:13:06 +05:00",
"latitude": -46.941837,
"longitude": 78.864089
},
{
"_id": "5cc2e64baebf24c595cf8fd3",
"index": 2,
"guid": "07215aa0-f61f-457e-8210-2615c528aa56",
"isActive": true,
"balance": "$1237891739192837.11",
"picture": "http://placehold.it/32x32",
"age": 22,
"eyeColor": "blue",
"name": "Flowers Wolfe",
"gender": "male",
"company": "XERONK",
"email": "flowerswolfe@xeronk.com",
"phone": "+1 (834) 454-2632",
"address": "658 Union Avenue, Wacissa, Wisconsin, 3808",
"about": "Quis incididunt aliquip sunt cillum deserunt tempor excepteur ut mollit velit esse. In dolore culpa dolore laborum aliquip aute aliqua velit eu incididunt. Ut in id sunt cupidatat. Sunt aute Lorem enim ad laboris esse anim labore exercitation. Do deserunt reprehenderit elit Lorem laboris voluptate et laboris aliqua proident nulla.\r\n",
"registered": "2018-03-31T12:21:18 +04:00",
"latitude": 31.650557,
"longitude": -24.327591
},
{
"_id": "5cc2e64bd055498bc686cc83",
"index": 3,
"guid": "12259810-8a2f-40bb-9057-2f839f3eaaa3",
"isActive": false,
"balance": "$28317289312793.01",
"picture": "http://placehold.it/32x32",
"age": 33,
"eyeColor": "blue",
"name": "Candice Cross",
"gender": "female",
"company": "GOKO",
"email": "candicecross@goko.com",
"phone": "+1 (908) 538-2658",
"address": "716 Lorimer Street, Keller, Maine, 4226",
"about": "Incididunt in commodo sint labore laboris do. Mollit sunt ad sunt est duis et esse. Est consectetur laboris aliqua qui sunt ut Lorem excepteur irure.\r\n",
"registered": "2014-03-21T01:35:22 +04:00",
"latitude": 22.210794,
"longitude": -83.475031
},
{
"_id": "5cc2e64bae2ad5d6be9a6e15",
"index": 4,
"guid": "7c068eea-2998-4882-9716-661f47723117",
"isActive": false,
"balance": "$141892371298.73",
"picture": "http://placehold.it/32x32",
"age": 37,
"eyeColor": "brown",
"name": "Dodson Reilly",
"gender": "male",
"company": "MOREGANIC",
"email": "dodsonreilly@moreganic.com",
"phone": "+1 (988) 401-3517",
"address": "115 Bennet Court, Foscoe, New Mexico, 7884",
"about": "Dolor id qui deserunt voluptate eiusmod elit consequat. Deserunt velit occaecat aliqua ex enim irure ullamco consequat duis culpa exercitation. Excepteur aute nisi do nisi exercitation. Consectetur enim laboris est mollit elit sunt nostrud ut occaecat amet. Duis sunt consectetur tempor reprehenderit do cupidatat nisi excepteur pariatur. Cupidatat laborum nisi in ipsum nulla commodo irure amet commodo non.\r\n",
"registered": "2015-04-20T12:34:02 +04:00",
"latitude": -72.250717,
"longitude": -94.67352
},
{
"_id": "5cc2e64b8b1a90539a3ab3f7",
"index": 5,
"guid": "ab1fba4e-d0dc-459b-9d27-c951ec870fd1",
"isActive": false,
"balance": "$1,261.25",
"picture": "http://placehold.it/32x32",
"age": 28,
"eyeColor": "brown",
"name": "Mcmahon Rollins",
"gender": "male",
"company": "OCTOCORE",
"email": "mcmahonrollins@octocore.com",
"phone": "+1 (877) 550-3535",
"address": "550 Conselyea Street, Osage, Pennsylvania, 8131",
"about": "Excepteur enim consectetur laborum sunt irure esse ullamco mollit culpa elit. Nostrud nostrud eiusmod adipisicing nisi aliquip adipisicing culpa Lorem aute duis aute dolor. Veniam ut in proident excepteur aute ex sunt anim fugiat sint ut aute. Ipsum duis amet voluptate ex duis adipisicing irure reprehenderit fugiat amet nisi irure. Incididunt incididunt laboris adipisicing fugiat.\r\n",
"registered": "2015-09-17T01:55:53 +04:00",
"latitude": -37.589241,
"longitude": 49.390228
}
]
});
//get the text size here
var getTextWidth = function(text, font) {
// re-use canvas object for better performance
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
}
//use this render in each column that you want to autosize
var myAutoSizeRender = function(val,data,id,cel){
cel._column.setWidth(getTextWidth(val,"17px Helvetica Neue"));
return val;
}
Ext.define('Fiddle.view.Main', {
extend: 'Ext.Container',
layout: 'vbox',
scrollable: 'y',
items: [{
id:'myGrid',
xtype: 'grid',
title: 'Test',
height: 500,
store:store,
columns: [
{
text:'Index',
dataIndex:"index"
},
{
text: 'ID',
width:100,
dataIndex: '_id',
renderer: myAutoSizeRender
},
{
text:'Guid',
dataIndex:'guid',
renderer: myAutoSizeRender
},
{
text:'IS Active',
dataIndex:'isActive'
},
{
text:'Balance',
dataIndex:"balance"
},
{
text:"Picture",
dataIndex:'picture',
renderer: myAutoSizeRender
},
{
text:'Age',
dataIndex:'age'
},
{
text:'Name',
dataIndex:'name',
renderer: myAutoSizeRender
},
{
text:'Eye Color',
dataIndex:'eyeColor'
}]
}]
});
Ext.application({
name: 'Test',
mainView: 'Fiddle.view.Main',
});