I am having a bit of trouble figuring out why there are missing items from the AttributeComboBox that I am testing. From debugging, I can clearly see that the field config has an array containing all the items, but only 15 are visible in the UI. Is there a config that needs to be specified to increase the number of displayed items?
It looks like maxHeight within the listConfig needs to be set. I had tried the maxHeight config, which didn't work, so I had assumed it was not a height issue. For reference, both configs have a default value of 300, so if you're having a similar experience, adjust the height above 300. There is also no extra whitespace if the maxHeight is set well above what may be needed to display all items.
Here is an example:
this.example = Ext.widget('rallyattributecombobox', {
model:'PortfolioItem',
field:'Something',
fieldLabel: 'Something',
labelWidth: 150,
stateful: false,
listConfig: {
maxHeight: 465
}
});
Related
How can I change the window size using Vue Test Utils ?
Default window size is 1024x768
This should work:
Object.assign(global.screen, {
width: 800,
height: 600
})
// if you only need one changed, the plain assignment syntax is shorter:
global.screen.width = 800;
If the above doesn't work, you should show us exactly where your code reads window size from.
If it reads from innerWidth/innerHeight, you can define them on the window object:
[
{ prop: "innerWidth", value: 800 },
{ prop: "innerHeight", value: 600 }
].forEach(({ prop, value }) => {
Object.defineProperty(window, prop, {
writable: true,
configurable: true,
value
})
})
If you're using media queries (matchMedia), see this answer on how to mock it.
Any of the above can be run inside the test(s) where you want the viewport size changed.
Keep in mind it's not going to be reset back to defaults after you change it, so all following tests will be run on the last set dimensions, unless you revert them to defaults at the end of the test where you need them altered.
I need to have fixed table body height to firstly show up on my whole page nicely and secondly to not change height when I choose filters and filter tags are added to header.
I have real trouble finding solution. My best guess I should overwrite MUIDataTable.responsiveScroll class but it does nothing when I change minHeight:'80vh' for exmple.
Yes, you need to override the MUIDataTable.responsiveScroll. This is what I did for expanding to full size of page
createMuiTheme({
overrides: {
MUIDataTable: {
responsiveScroll: {
maxHeight: 'none',
},
},
},
});
You can add other styles there if you want a minimum height.
I have a problem with titanium 3.5.0. When I want to position my ui element based on previous element in the layout with some methods like getWidth or getTop I'm getting Nan and in the console I'm getting a warning that says:
Invalid dimension value (nan) requested. Making the dimension undefined instead.
I have scrollview and I want to arrange my item into it so what I did
this is my scrollview code
var scrollView = Ti.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
backgroundColor:'#fff',
showVerticalScrollIndicator: false,
showHorizontalScrollIndicator: false,
height:"100%",
width: "100%",
top:36.6
});
and the scrollableview code
var view = Ti.UI.createView({
backgroundColor:'#fff',
borderRadius: 0,
height: 2000,
width: Ti.UI.FILL
});
and then I started adding my ui element in the view
var type =Ti.UI.createLabel({
text:"Type",
color:label_color,
right:207,
left:label_p_l,
font:{ fontFamily: customfont,fontSize:17},
top:37.5
});
var p_name=Ti.UI.createLabel({
text:"Property Name",
color:label_color,
left:label_p_l,
font:{ fontFamily: customfont,fontSize:17},
top:type.getTop()+label_h+32
});
so now it's working perfectly because type has a numeric value and even I added three more element in this way and every things works perfectly after that
I have added the 4th element like this and now when I started to get Nan.
var space_Slider = Titanium.UI.createSlider({
top:space.getTop()+space.getHeight()+15,
min:0,
max:1000,
value:0,
height:4,
backgroundColor:"#fff",
leftTrackImage:'/images/slider_color.png',
rightTrackImage:'/images/slider_color.png',
thumbImage:'/images/slider.png',
});
now the space.getTop() starts returning Nan
Any ideas how to solve this problem?
That happens because you've specified width / top not as numeric data type, but as string. "100%", "15dp" etc
getWidth() returns numeric data types IFF you pass numeric to width parameter when constructing the element or invoking setter method.
Furthermore, if you don't specify width / top parameters during construction of the elements they will not return anything.
To get the dimensions of the element you need to add them to some container / parent view and postlayout all elements. After this is done you can ask for dimensions like this:
element.size.width
I want to change the Ext.grid.Panel header height.
The height of a grid panel header is forcibly set at 28px.
No sass settings
Header configuration on the panel did not work for me
Modifying the grid columns height seems to work when configuring < 28px. 28px seems to be the minimum.
This is what I have so far (and it works), but I don't like the solution.
Ext.define('Ext.grid.Panel', {
listeners: {
beforerender: function (cmp, eOpts) {
cmp.headerCt.setHeight(25);
}
}
});
Additionally, column headers seem to be fixed at 28px as well. Setting the height of the header to 25 will not set the column header to 25. You need to override that as well in the scss / css. Otherwise your column header menus will display off the 28px height.
.x-column-header
{
height: 25px;
}
This solution does not work: If you drag column headers, changing the column's index position, it will break -.-
Recommedations?
To set the height of the column headers, you must set the height after their compilation. Again, the height value for the column configuration does not work to set the height < 28, but works > 28.
I have found that modifying the height after compilation correctly sets the height and allows columns to be draggable (everything works as it should).
Ext.define('Ext.grid.Panel', {
listeners: {
beforerender: function (cmp, eOpts) {
cmp.columns[0].setHeight(25);
}
}
});
My solution couldn't use this because I create a dynamic grid. In the dynamic part of the grid I use GRID.reconfigure(); - there by destroying anything that was created on a beforerender state.
Ext.define('Ext.grid.Panel', {
listeners: {
reconfigure: function (cmp, eOpts) {
cmp.columns[0].setHeight(25);
}
}
});
The reconfigure function fires after the reconfiguration so this is how I got around the dynamic grid reconfiguration.
You can also use sass sub-styles for that gridpanel and set the 'ui' config:
add ui:'custom-height-item' to your config
#include extjs-panel-ui(
'custom-height-item',
$ui-header-line-height: 28px,
$ui-header-padding: 2px;
)
I have a certain view where I want to post text so I need the height of the row cells to be bigger than the default. I look up the documentation of ExtJS 4.0 and come up with this:
Ext.define('APP.view.CalendarEventsGrid', {
//extend: 'Ext.grid.Panel',//this is the default which is working
Ext.create('Ext.grid.Panel',{
viewConfig: {
height: 50
}
}),
id: 'CalendarEvent',
requires: [
'Ext.data.*',
'Ext.grid.plugin.CellEditing',
'Ext.form.field.Text',
'Ext.toolbar.TextItem',
],
initComponent: function(){...
But this don't do the trick. So could anyone help me with a way to change the height of the row in this exact view?
i am not sure what is your exact problem but i assume that you want to pass height: 50 in the viewConfig config option of Ext.grid.Panel
every config of the parent class can be passed through the child class so you don't need to instantiate parent class to specify config options (and actually what you tried in the question is not possible at all :))
Ext.define('SYMADM.view.CalendarEventsGrid', {
extend: 'Ext.grid.Panel',
viewConfig: {
height: 50
},