I'm trying to search for a particular field based on what a user searches in a textfield. For instance:
items: [
{ xtype: 'panel', padding: 5, height: 500, width: '35%',
items: [
{ xtype: 'textfield', padding: 5, region: 'west', fieldLabel: 'Criteria 1', itemId: 'criteria_1' }, ...
And here's code from my view class:
store.filter('KBE_ID', '#criteria_1');
I want to return a filtered search that uses the value of my textfield. Could this be done by giving it an itemId?
Get your reference to the field using the itemId, then do the filter using getValue():
var searchField = myPanel.down('#criteria_1');
store.filter('KBE_ID', searchField.getValue());
Related
I am trying to create a multiline footer with pdfmake; what I was able to do until now:
const docDefinition = {
footer: [
{
stack: [
{ text: "Line 1" },
{ text: "Line 2" },
{ text: "Line 3" },
{ text: "Line 4" }
], style: 'footer'
}
],
styles: {
footer: {
fontSize: 6, bold: true, alignment: 'center'
}
}
};
While this creates what I want, the style is not correct. As soon as I increase the font size, the bottom line starts to disappear. If I set the font size to 12, only the first two lines appear in the generated PDF on the server-side.
What change do I need to make here?
You just need to add margin to the page and you can accommodate as many lines as you want. e.g. Enter the code below in pdfmake playground: http://pdfmake.org/playground.html
// playground requires you to assign document definition to a variable called dd
let textFooter = `
A 12.4% discretionary service charge will be added to your bill. All prices are inclusive of VAT. Thank You!\n\n
This is line 2 - 263139\n
Line 3 comes here\n
Go big or go home!!!
`;
var dd = {
header: function(currentPage, pageCount, pageSize) {
return [
{ text: 'simple text\naaa\nbbb\nccc\nddd', alignment: 'center', fontSize: 9 },
]
},
footer: function(currentPage, pageCount, pageSize) {
return [
{ text: textFooter, alignment: 'center', fontSize: 9 },
]
},
// margin: [left, top, right, bottom]
pageMargins: [ 40, 60, 40, 100 ],
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
In the code above, I have set margin bottom to 100 which gives us space to include 4 lines.
I try to find answer for this question but I can't. So I have simple grid with cells editting by plugin (Ext.grid.plugin.CellEditing). So in such a case I see selected cell displayed in "bluebox".
but I dont want to see such a selection, I want to change this background. Any suggestion please.
Thank you Jadhav, and I see the second problem in this grid. I want to edit only two columns:
this numbers with gray backgruond and this checkbox. The first one is working good but this checkbox not (when I check it and go to other place checked position become unchecked) and can't set the same background as I set for column with numbers. This is done by:
renderer: function(value, meta) {
meta.style = "background-color:lightgray;";
}
This method, in checkbox column give me this:
Why and how to solve this?
OK, almost ok because of your help but when I change background via css I see the following result (summary row is also, partly in background color') and still don't know why and how to correct it:
You can implement using css for selected cell in CellEditing.
In this Fiddle, I have created a demo using CellEditing plugin.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'demostore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Demo Data',
store: 'demostore',
cls:'my-grid',
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}],
selType: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
height: 200,
renderTo: Ext.getBody()
});
}
});
CSS
<style>
.my-grid .x-grid-cell-selected{
background-color: transparent !important;
}
</style>
One more way you also done using on cell editor component blur event. You need to do put this below code
var selectionModel = grid.getSelectionModel();
selectionModel.deselect(selectionModel.selection.record)
Just you have to overwrite inline css, so that you can change background color i.e..,
.x-grid-row-selected .x-grid-td {
background: #ffffff;
}
I use ZingCharts for my dashboard charts and I am stucked on this problem. I made a codepen to show my problem. I got array of strings which represent average respond time for some task in hours and I cant figure out why my chart never show 1st string value of array as you can see on codepen.
Here i also post my angular function for this chart
//bar chart with average task time respond
$scope.avgRespondTaskTime = {
gui: {
contextMenu: {
empty: true,
}
},
type: 'bar',
legend: {
//width: "100%",
layout: "center",
position: "50%",
margin: "0px 0px 0px 0px",
borderColor: "transparent",
backgroundColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v hours"
},
"scale-x": {
"label": {
"text": "Project name",
},
"labels": projectNames
},
"scale-y": {
"label": {
"text": "Average Time",
},
},
series: [
{
text: "Completed in Time",
values: $scope.avg_respondTime,
backgroundColor: "#00a65a"
},
]
};
https://codepen.io/spsrulez/pen/ygEvNg
So I solved my problem with using moment.js using this function
moment.duration("your string represent time").asHours()
which I store into array $scope.avg_respondTime
Hope it helps someone in future.
I have a basic Rect shape like this:
var rectShape = new joint.shapes.basic.Rect({
position: { x: 60, y: 10 },
size: { width: 160, height: 35 },
attrs: {
rect: {
fill: '#F5F5F5'
},
text: {
fill: '#FC8A26',
'font-size': 12,
'font-weight': 'bold',
'font-variant': 'small-caps'
}
}
});
I use clone() to create more rectangles like that one:
var rect1 = rectShape.clone().translate(520, 10).attr('text/text','rect1');
I want to have 2 different words inside the rect, one at the size 12 and the other at the size 8. Any idea on how I can do that?
Thank you!
you need to create a custom shape with new SVG markup containing a text element that contains a <tspan> for each word that you want. You could adapt the markup from the standard Rect element. Give each element a different class name, for example replace the <text/> element in the Rect markup with <text><tspan class="word1"/><tspan class="word2"/></text>. The shape definition would look like this:
joint.shapes.my.twoTextRect = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text><tspan class="word1"></tspan> <tspan class="word2"></tspan></text></g>',
defaults: joint.util.deepSupplement({
type: 'my.twoTextRect',
attrs: {
rect: { fill: 'white', stroke: 'black', 'stroke-width': 1, 'follow-scale': true, width: 160, height: 35 },
text: { ref: 'rect' },
'.word1': { 'font-size': 12 },
'.word2': { 'font-size': 8 }
},
size: { width: 160, height: 35 }
}, joint.shapes.basic.Generic.prototype.defaults)
});
Then to create your shape instance:
var rectShape = new joint.shapes.my.twoTextRect();
To set the text of the <tspan> SVG elements you can use
rectShape.attr('.word1/text', 'word 1');
rectShape.attr('.word2/text', 'word 2');
This results in an element that looks like this:
You can clone the element like this:
var clone = rectShape.clone().translate(520, 10).attr({'.word1': {text: 'clone1'}, '.word2': {text: 'clone2' }});
And this makes a new element:
I want to make a tabbed formPanel fitting user's screen.
here's my code:
var form2 = new Ext.FormPanel({
labelWidth: 75,
border:false,
items: {
// removing next line affects the layout %)
xtype:'tabpanel',
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[
{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name'
}
]
},
{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
fieldLabel: 'Home'
}
]
}
]
}
});
form2.render('container');
And later in my a have an , of course.
That makes a form with incredibly big width...
If I revome line with "xtype: 'tabpanel'" everything works fine (except there's no tabbed panel on screen)
Is it a bug or I forgot something. Help me figure it out, please=)
Thanks for your attention.
Set anchor and set layout : fit configs for formpanel.