I want to replace the header 'number' by a custom header made in html.
I use vuetify for display data table.
actually I have :
headers: [
{text: 'number', value: 'number'},
{text: 'car', value: 'car'},
{text: 'Total ', value: 'total'},
{text: 'Actions', value: 'actions'}
],
I think, I must play with the template and slot but I'm totaly lost.
I found the solution
<template v-slot:header.number>
Here My custom header
</template>
that's works great !
Related
So here's the column data for the table, a couple of columns have functions on formatter and success to render their values automatically.
var columnasInercia = [
{field: 'lechoNo', title: 'Lecho Nº', formatter: function(value, row, index) { return index + 1; }},
{field: 'distancia', title: 'Distancia', editable: {type: 'text'}},
{field: 'varillaNo', title: 'Varilla Nº', class: 'ColVarillaNo', editable: {type: 'text', success: function(response, newValue) { calcularArea($(this).parent('td'), newValue); }}},
{field: 'areaVarilla', title: 'Area varilla', class: 'ColAreaVarilla'},
{field: 'varillasEnLecho', title: 'Varilla en lecho', editable: {type: 'text'}},
];
Here's an example of the data populating it at the beginning, since two columns have their values set by events I just pass values for 3 columns.
var datosInerciaMayor = [
{'distancia': '6', 'varillaNo': '10', 'varillasEnLecho': '3'},
{'distancia': '21', 'varillaNo': '10', 'varillasEnLecho': '2'},
{'distancia': '36', 'varillaNo': '10', 'varillasEnLecho': '2'},
];
Here's how the table looks:
Now the problem is that when I run the getDatamethod of the API
alert(JSON.stringify($('#TablaInerciaMayor').bootstrapTable('getData')));
I just get data for the 3 columns I populated:
I would check out the following link which lists all of the methods used in bootstrap tables. But to answer your question, no. All of the get row functions will return an object and then you can cast it into whatever you want to work with. Easiest being a map of the data.
http://bootstrap-table.wenzhixin.net.cn/documentation/#methods
This is my model:
data: i
0: i
data: Object
events: Object
hasListeners: k
id: "region-ext-record-344"
index: 0
internalId: "ext-record-344"
modified: Object
phantom: false
raw: Array[2] // i want to get those two elements one displayField, another valueField
0: "01"
1: "Region 1"
length: 2
__proto__: Array[0]
store: i
stores: Array[1]
__proto__: Object
1: i
2: i
3: i
length: 4
__proto__: Array[0]
I can post the code if you want to!
I tried to read store like:
store: regionStore, but it is showing me an empty box with 4 empty lines equal to item count in my store, then I tried to do like store: regionStore.data.items and now it shows me [object object] lines, I totally get it why, but can't find solution for that. I am new to all ExtJs stuff, I am using ExtJs 4 though.
My model looks like that :
Ext.regModel('region', {
fields: [
{name: 'id', type: 'integer'},
{name: 'name', type: 'String'}
});
and my store looks like that:
var regionStore = new Ext.data.ArrayStore({
id: 'regionStore',
model: 'region',
data: MyDesktop.GridWindow.getRegionData() //that is data from ajax response
});
My combobox:
{
xtype: 'combobox',
value: "region",
store: regionStore,
width: 135,
id: 'regionCombo'
editable: false
}
You have tagged your question extjs 4.2, but your code is old style and not following recommendations. I really recommend you to read the manual, especially the introduction to MVC.
Ext.regModel is deprecated as of version 4.0.0. Change your code as follows and save it to the file app/model/Region.js :
Ext.define('MyApp.model.Region', {
extends: 'Ext.data.Model',
fields: [
{name: 'id', type: 'integer'},
{name: 'name', type: 'string'}
]
});
In file app/store/Regions.js :
Ext.define('MyApp.store.Regions', {
extends: 'Ext.data.ArrayStore',
//id: notice that id is no longer necessary
model: 'Region',
//data: you load the store from the server, so the data is loaded automatically
autoLoad: true
})
Your combobox becomes:
xtype: 'combobox',
value: 'region',
store: 'Regions',
width: 135,
id: 'regionCombo',
editable: false,
valueField: 'id',
displayField: 'name'
I never used extjs before 4.2, but it seems the changes introduced with version 4 are important. It may be difficult to adopt the new paradigms. But I'm sure it radically simplifies your code. You certainly never will regret this step.
Also with the release of version 5.0, I think it's time to develop new habits and leave ExtJs 2.0 coding style behind.
You started off correctly, but you didn't specify which fields to use. Add the missing configuration :
store: regionStore,
valueField: 'id',
displayField: 'name'
For a combobox you can define a store inline as :
store: [[1, 'first option'], [2, 'second option']],
In this case you will not need to declare the value and the display field. They are implicit.
My Sencha Touch 2 web/mobile app is reading in JSON where one of the elements is a list of millisecond timestamps separated by a vertical bar. I would like to convert those timestamps into a human readable form (day-Month, hours) and display them in a selection menu within my form.
Currently, I have a form displaying the data as it is. I know how to implement a dropdown with items, but I'm having trouble doing the date-time conversion and populating the dropdown with the newly converted items.
My JSON looks like this: "visit-time":"1394416800|1394445600|1394460000|"
My Sencha Touch form looks like this:
{
xtype: 'fieldset',
readOnly: true,
title: 'Visit Information:',
items: [
{
name: 'from',
id: 'from',
xtype: 'textareafield',
label: 'From',
readOnly: true
},
{
name: 'to',
id: 'to',
xtype: 'textareafield',
label: 'To',
readOnly: true
},
{
name: 'visit-time',
id: 'visit-time',
xtype: 'textareafield',
label: 'Visit Time',
readOnly: true
}
]
},
Basically you have to populate the options of an http://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.Select with your dates.
You will have to:
Get visit-time and convert it to an array of timestamps using split()
Drop the last element of the array that will be empty using pop()
Create for each timestamp a Date object with: new Date(parseInt(timestamp)*1000);
Format your dates with Ext.Date.format(date, formatString); check Ext.Date docs for the formatString.
When you will have your formatted dates into an array, you could just populate the field's store using Ext.data.Store.setData()
How do i correctly pass the value of my selectfield into the ajax proxy in my store?
Ext.define('FirstApp.view.Home',{
extend:'Ext.Panel',
xtype:'home',
config:{
title:'Home',
iconCls:'home',
html:'<h1>Home Page</h1><hr><p>Welcome to Sencha Touch 2 Training</p>',
layout:'fit',
scrollable:true,
styleHtmlContent:true,
styleHtmlCls:'home',
items: [
{
xtype: 'selectfield',
id: 'visit',
label: 'Choose one',
value:'restaurant',
options: [
{text: 'Museum', value: 'museum'},
{text: 'Pubs', value: 'pub'},
{text: 'Attractions', value: 'attraction'}
]
}
]
}
})
I am trying to place the value here: '+ REFERENCE HERE +' in the code below. I have tried '+#visit+' and '+#value+' with no success
Ext.define('FirstApp.store.Places',{
extend:'Ext.data.Store',
config:{
autoLoad:true,
model:'FirstApp.model.Place',
proxy:{
type:'ajax',
url:'https://maps.googleapis.com/maps/api/place/search/json? location=52.247983,-7.141113&radius=10000&types=food&name='+ REFERENCE HERE +'&sensor=false&key=KEY',
reader:{
type:'json',
rootProperty:'results'
}
}
}
})
To get a component by ID in Sencha frameworks you want to use Ext.getCmp, and then use the getValue method. So where you are trying to put the reference, put this:
Ext.getCmp('visit').getValue()
Ideally you want to try to stay away from hardcoded component IDs, and instead use refs/selectors based on the component path, type, etc.
Simple question here, and I'm really surprised I cannot find an answer to it anywhere.
I have the following product model:
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'manufacturer', type: 'auto'}, // i.e. nested object literal
],
});
As can be seen, a product has a nested object inside it that contains details about a manufacturer (id, name, description, etc.).
I display products in an Ext.grid.Panel, like so:
Ext.create('Ext.grid.Panel', {
title: 'Products',
...
remoteSort: true,
columns: [
{text: 'Id', dataIndex: 'id', sortable: true},
{text: 'Name', dataIndex: 'name', sortable: true},
{text: 'Manufacturer', dataIndex: 'manufacturer', sortable: true, renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
}
},
],
});
As you can see, all three columns are configured to be sortable, and I am using remote sorting. This works for the first two columns, but the third column (manufacturer) is giving me trouble.
For instance, when a user sorts the grid by product name, Ext sends the following JSON to the server:
{ sort: [{ property: 'name', direction: 'ASC' }] }
This is fine, because the server knows to simply sort by each product's name property.
But when a user sorts the grid by manufacturer, the JSON sent is:
{ sort: [{ property: 'manufacturer', direction: 'ASC' }] }
Since the manufacturer is an object, this does not give the server any idea which property of the manufacturer it should sort by! Is it the manufacturer's id? Or is it the manufacturer's name? Or something else?
For my grid, since I render the manufacturer's name, I'd like to sort it by name. But I see no way to tell the server this. And I certainly don't want to make my server just sort by the manufacturer's name all the time.
If the JSON was sent like this it would be ideal:
{ sort: [{ property: 'manufacturer.name', direction: 'ASC' }] }
Sadly, Ext does not seem to do that (?). So, what's the solution?
Okay, I asked on the Sencha Forums and got a response. It appears you can override getSortParam() in the column config. Example:
columns: [
...
{
header: 'Manufacturer',
dataIndex: 'manufacturer',
sortable: true,
renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
},
getSortParam: function() {
return 'manufacturer.name';
},
}
...
]
This will send the ideal JSON I described in my OP. Now I just need to make my server parse this properly! :)