Hi StackOverFlow Community,
Well, maybe is theory that I forget read, but I don't stand why this code below don't show me anything. (I already try with another answers in the forum like config height manual and layout fit work but with these layout I can't do what I want).
Code:
Ext.define('myMoney.view.Settings',{
extend: 'Ext.Panel', //--> Ext.Container don't work either
fullscreen: true,
xtype: 'configuracion',
config: {
title: 'Configuracion',
iconCls: 'settings',
scrollable: true,
styleHtmlContent: true,
layout: {
type: 'vbox',
align: 'middle'
},
defaults: {
width: '50%',
height: '50%',
flex:1,
},
items: [
{
xtype: 'list',
itemTpl: '{item}',
data: [
{item: 'Cuentas Actuales'},
{item: 'Agregar nueva Cuenta'},
]
},
]
}
});
The real code have two 'fieldset' before the list but I don't want show you guys a code too long. so, anyone knows what happens?
Usually it is fixed by layout: 'fit' setting. You could add it to the outer fieldset config.
Related
Here is an example (that doesn't work in qualtrics, works fine if I just make an HTML file and open in browser)
In qualtrics:
Make a (text/graphic question)
In HTML put <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
In the question javascript put
jQuery.getScript("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js", function(){
var xyValues = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];
new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgb(0,0,255)",
data: xyValues
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{ticks: {min: 40, max:160}}],
yAxes: [{ticks: {min: 6, max:16}}],
}
}
});
});
Then, if you try to preview the survey , the chart will not load and you will get a console error of TypeError: undefined is not an object (evaluating 'iScale.axis')
If you change the source to https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js (version 3.3.2) then the chart will load.
Any way to deal with this? Or is the only option to stick with version 3.3.2 or older?
Aside: Instead of using jQuery.getScript, you can just put the script source in the look and feel header section. Same behavior though.
Looking in the Docs for Sencha Touch there seems to be an option on the List widget that allows for setting "infinite" which enables infinite scroll.
Docs: https://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.List-cfg-infinite
I am hoping this will resolve some issues that I have with performance with very large lists on portable devices.
Important Note: This is for an offline mobile app. As in the fiddle. The store already contains all of the data.
I tried enabling it on a large list but all it does is hide the data.
{
xtype: 'list',
store: 'contactStore',
flex: 1,
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
infinite: true /* Setting this to true hides the list */
}
What am I missing? I have included a jsFiddle.
http://jsfiddle.net/AnthonyV/bba58zfr/
The issue here isn't anything about the data being loaded like the other answers. You have said the data is being loaded into the store just fine as when you don't have infinite set to true you can see the data.
First, let's discuss what the infinite config does. As Anand Gupta explained, the infinite config will only render the number of list items that can fit on the screen (plus some as a buffer for scrolling). If you don't have it set to true then the list will render all items and not manage a visible range. With all items rendered, the list can support auto sizing. However, when infinite is set to true, the list needs to know what size it has in order to calculate the number of visible rows it can render.
This is where the issue happens, the list doesn't have a full size set to it. You have the list nested in a container and that container uses vbox layout:
config: {
title: 'Big List Issue',
fullscreen: true,
items: [{
xtype: 'container',
layout: 'vbox',
title: 'Big List',
items: [{
xtype: 'list',
store: 'contactStore',
id: 'simpleList',
flex: 1,
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
striped: true,
infinite: false
}]
}]
}
This is technically overnesting. Overnesting is when you have nested a component within a container that doesn't need to be nested within the container. This is an unnested version of your code that should work as you want:
config: {
title: 'Big List Issue',
fullscreen: true,
items: [{
xtype: 'list',
title: 'Big List',
store: 'contactStore',
id: 'simpleList',
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
striped: true,
infinite: true,
variableHeights: true
}]
}
What I did here is remove the container and had the list as a direct child of your MyApp.view.MyIssue navigation view. The navigation view uses card layout which will give each direct child 100% height and width and therefore allowing the list to calculate the number of rows it can render with infinite set to true. Here is a Sencha Fiddle to show this unnested list in action: https://fiddle.sencha.com/#fiddle/11v1
The other way, if you REALLY wanted the list to be nested in that container (the more you nest, the bigger the DOM since you have more components created and the bigger the DOM, the slower your app may respond) then you can give the container's vbox layout the align config:
config: {
title: 'Big List Issue',
fullscreen: true,
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
title: 'Big List',
items: [{
xtype: 'list',
store: 'contactStore',
id: 'simpleList',
flex: 1,
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
striped: true,
infinite: true
}]
}]
}
In the unnested list example, I also use the variableHeights config on the list. This allows the list items to be properly heighted. Run the fiddle with it commented out to see the difference it makes.
You can go with this. Add this plugin, It handles automatically infinite scrolling.
http://docs.sencha.com/touch/2.4/2.4.0-apidocs/#!/api/Ext.plugin.ListPaging
For offline
You can implement an idea. Create 2 store one is fully loaded and second will load only with some page size suppose 10. You will use second store in your grid and implement list paging plugin, also pass here second store.
You can take help with this fiddle example. (this example is in Ext jS 5 but logic will be same)
https://fiddle.sencha.com/#fiddle/pim
Please try this one and let us know.
First you need to understand that infinite: true helps in improving list performance. It helps rendering only that chunk of list data which is the current page, rest are not rendered. So,
For pagination, you backend should support that like it should have parameter like limit, start, pageSize etc.
For implementing pagination, your store should have these configs like pageSize, buffered etc.
Hence if your backend support and you have implemented pagination. Then you can enjoy the benefit of infinite: true and get extreme sencha touch list performance.
I have a settings screen that works quite nicely using the "ProMotion-formotion" gem. I would like to make a couple of the rows into buttons that will call a method when pressed eg:
def table_data
set_nav_bar_button :left, title: "Cancel", action: :close
set_nav_bar_button :right, title: "Save", action: :submit
{sections:[{
title: 'Help',
rows: [{
title: "About",
type: :string,
editable: false,
action: :help #this is the sort of thing I want
}]
}, {
title: 'General',
rows: [
[...etc...]
Anyone know how I can achieve this?
edit: I've found a possible solution here:
How to use .on_delete callback in ProMotion-Formotion
But still wondering if there is a way of doing it within the table_data method.
Figured it out...
{
title: "Any Button",
type: :button,
key: :some_button
}
# later...
form.row(:some_button).on_tap do |row|
# do something when tapped
end
from here:
https://github.com/clayallsopp/formotion/blob/master/LIST_OF_ROW_TYPES.md#button
I want to observe a nested property. I have the following Ember Array:
specifications: [
{
title: "specification name",
filters: [
{
title: "example"
checked: false
},
{
title: "example 2",
checked: true
}
]
},
...
]
I want to create a computed property:
activeFilters: (->
Ember.computed.filterBy('specifications.#each.filters', 'checked', true),
).property('specifications.#each.filters')
The active filters property is not working, I tried several combinations of property methods, but none worked.
Is the property I am trying to create actually possible?
Yes, it is possible. The thing is that for it to work you can't use a JavaScript array, you need an Ember.ArrayProxy and then you can access its special properties: http://emberjs.com/api/classes/Ember.ArrayProxy.html
specifications: Ember.ArrayProxy.create({
content: [
{
title: "specification name",
},
]
});
So, you'll have something like:
oneSpecChangedCheck: function() {
// don't know which, but someone changed
var s = this.get('specs');
// loop and process
return s;
}.property('specs.#each.checked'),
http://emberjs.jsbin.com/zohuzo/2/edit?html,js,console,output
I am new to sencha , and I am using sencha 2 mvc.I am having a Tabpanel and the first tab contains a list.When clicking on the button in the list i want to load/switch view of its details with a form..I am unable to find the answer.Please help me asap..
{
xtype: 'tabpanel',
baseCls:'tabheader',
cls:'tab_container',
scrollable:true,
tabBarPosition: 'top',
flex:1,
items: [
{
xtype:'container',
title:'Sample',
id:'Sample',
layout:'card',
cardSwitchAnimation: 'slide',
tabBarPosition: 'top',
items:[
{
title: 'Sample',
xtype: 'list',
flex:1,
store: 'SampleWithoutAgentOffers',
itemTpl: '{name}' ,
onItemDisclosure: function(record, btn, index) {
Ext.Viewport.setActiveItem(1);
}
}
]
},
{
xtype:'panel',
html:'hiiii'
}
]
}
On itemdisclosure i want to load view..Please help me..
Please see my edits to your original question, I'm not sure if that configuration you posted would even run in JavaScript.
I fixed your configuration object so it should technically work. However, I don't have visibility into your Viewport object. If what you are trying to do onItemDisclosure is show the panel with html of 'hiii', then you should be doing:
onItemDisclosure: function(record, btn, index) {
this.parent.setActiveItem(1);
}