Have a pretty common task to do where I need a search form above a list to display the results, the problem is that the list is not showing the results, the store and the proxy work correctly because when I use firebug to locate the list items the list always have height of 0px.
I have already searched and the common ways to workaround this is to use a fit layout, but using that on the parent panel makes all look small as if the width used was 10px.
I cant set a fixed height because I want the list to fill the remaining space, and neither the flex option cause that stretches the search form when I want that to use the default size of the buttons and input fields.
Here is the config Im using on the view
Ext.define('MyApp.view.search.Search', {
extend:'Ext.navigation.View',
xtype: 'search_view',
config:{
items:[
{
fullscreen:true,
scroll:false,
xtype:'panel',
title:'Search',
items:[
{
xtype:'searchfield',
name:'search',
label:'Search',
},
{
xtype:'container',
layout:'hbox',
width:'100%',
margin:'3 0 0 0',
defaults:{
flex:1
},
items:[
{
xtype:'selectfield',
options:[
{text:'Option 1', value:'opt1'},
{text:'Option 2', value:'opt2'}
]
},
{
xtype:'button',
text:'Search',
action:'search'
}
]
},
{
xtype:'list',
itemTpl:['{title}'],
onItemDisclosure:true,
plugins:[
{ xclass: 'Ext.plugin.ListPaging' }
]
}
]
},
],
}
});
This image describes what Im trying to achieve, I took this screenshot by setting manually a height to the list container, as you can see it works the problem is that the list height doesn't fill the space below the form by default.
This is what I ended up doing to solve this, it's more of a workaround since I had to change the layout to only have the list in it, and use toolbars for the search options, this way the toolbar controls only use the minimum height they need to draw themselves correctly.
Ext.define('MyApp.view.search.Search', {
extend:'Ext.Container',
xtype: 'search_view',
config:{
fullscreen:true,
layout:'card'
items:[
{
xtype:'toolbar',
docked:'top',
items:[
{
xtype:'searchfield',
name:'search',
flex:6
},
{
xtype:'button',
action:'search',
iconCls:'search',
iconMask:true,
ui:'simple',
flex:1
}
]
},
{
xtype:'toolbar',
docked:'top',
items:[
{
xtype:'selectfield',
flex:1,
options:[
{text:'Option 1', value:'opt1'},
{text:'Option 2', value:'opt2'}
]
}
]
},
{
xtype:'list',
itemTpl:['{title}'],
onItemDisclosure:true,
plugins:[
{ xclass: 'Ext.plugin.ListPaging' }
]
},
],
}
});
As you can see I have two toolbars docked at the top, and the list filling the whole layout. Here is a screenshot of how it looks now.
Thanks for your time.
did you tried setting your container layout to "fit"?, basically it will use all the remaining available height, here is a great guide on layouts for sencha touch: http://docs.sencha.com/touch/2-0/#!/guide/layouts right from the docs!
Panel should have vbox layout, list should have fit layout and set flex option.
As seen if example bellow, if flex value is not set to a button, it should get default size.
From the documentation:
Flexing means we divide the available area up based on the flex of
each child component...
Here is an example:
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
html: [
"Some content"
].join("")
},
{
title: "About",
iconCls: 'star',
layout: "vbox", // this card has vbox layout
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'List'
},
{
xtype: "list",
layout: "fit", // take as much space as available
flex: 1, // define flex
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
],
itemTpl: '{name} is {age} years old'
},
{
xtype: 'button',
text: "Button"
}
]
}
]
}
});
And screenshot:
Note: I am learning Sencha Touch so I am not sure that written is correct.
Related
I am using CKEditor 4.5.11 in my responsive design website. Everything seems to be working fine except 2 ckEditor issues which are listed as under:
How to make images inserted responsive in ckEditor? I used my CSS for them but it didn't work at all. Even it didn't apply to those.
How to convert ckEditor full toolbar into basic and simple toolbar for mobile (small screen) devices e.g. when width goes less than 600px?
I searched a lot on Google and Stack Overflow but no proper solution has been given there except a few Drupal based workaround which I have nothing to deal with and none of my business. I think this topic is not considered seriously on Internet so far.
Any ckEditor plugin, custom JS or CSS solution will be accepted if it does work. Note that I don't want to change (upgrade) my ckEditor because it is very well setup with ckFinder and when I upgraded in past then everything got broken. So please no suggestion on upgrade.
For responsive images, use this:
CKEDITOR.addCss('.cke_editable img { max-width: 100% !important; height: auto !important; }');
If you want to modify the toolbar when browser resizes, you can't do that without destroying the instance and recreate it with another toolbar configuration (the contents will not get lost). For that, you can use window.matchMedia (supported in Firefox, Chrome and IE 10) like this:
var toolbar_basic = [
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
]
var toolbar_full = [
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
]
var mqs = [
window.matchMedia('(max-width: 600px)')
]
mqs.forEach(function(mq) {
mq.addListener(widthChange);
});
widthChange(); // call it once initially
function widthChange() {
if (CKEDITOR.instances.editor1) {
CKEDITOR.instances.editor1.destroy();
}
if (mqs[0].matches) {
// window width is less than 600px
CKEDITOR.replace('editor1', { toolbar: toolbar_basic });
} else {
// window width is at least 600px
CKEDITOR.replace('editor1', { toolbar: toolbar_full });
}
}
I am Newbie in Extjs and use version 4.1. I want to know which component is best to use into one Ext.Viewport, to have left panel sidebar (like in Wordpress admin, like Wordpress Post/Page/Media/Categories/Settings menus etc). I want to be vertical menu, one under the other.
I found samples with Ext.tree, Ext.menu or vertical Tabs for sidebar, but i dont really know if for Ext.Viewport (not MVC Application) it is one best approach to use components in "items" property.
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'box',
region: 'north'
....
},{
layout: 'border',
id: 'sidebar',
region:'west',
items: HERE WANT SIDEBAR COMPONENT
....
},
{
id: 'vbox-panel',
region: 'center',
defaultType: 'container',
layout: {
type: 'vbox'
},
defaults: {
frame: true
},
items: [
{
height: 40,
html: 'Top content'
....
}, {
id: 'content',
layout: 'card',
items: [content],
flex: 2
....
}, {
flex: 2,
html: 'Bottom comtent'
....
}
]
}],
renderTo: Ext.getBody()
});
Thanks
UPDATE:
- write one comment with one simple solution, for beginers as me :)
You can use a vertical toolbar like this : http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/toolbar/vertical-toolbars.html
I use Ext5 and I have a question. Is it possible to remove text and add items into panel header after the panel collapsed?
Belows the code, the east panel is collapsible. I want to remove text and add items into header after it collapsed.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
UPDATE
In this case, I add buttons into header but when the panel is collapsed the button disappeared. Is there any way to show or add components into header when panel is collapsed?
{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150,
header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}
}
here is the fiddle
Thanks
Please refer to "placeholder" related configs in Ext.panel.Panel class. Below is your code from fiddle modified.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
collapseMode:'placeholder',// set collapseMode to placeholder
split: true,
width: 300,
placeholder:{ // Try different components and layout configs
width:100,
items:[{
xtype:'button',
text:'Button 1'
}]
}
/*header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}*/
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
The header you see collapsed is actually another instance of Ext.panel.Header created just for this purpose. I tried to find some configs to customize it, but the Ext.panel.Panel was not created having it in mind.
So you'll have to override the method which creates this reader, which I found out is called createReExpander. It's a big method hard to override without having to rewrite a lot of stuff, but it can be done.
I tried adding buttons to the header and the result was not visually nice, but at least they were created!
So I would suggest you use tools instead of buttons if you don't need text on them.
i have strange issue with removing item from fieldset. my app success adding new textfield fieldset item, buth when i do remove() my app screen got stuck without any error on my google chrome.
here my source
view js
Ext.define('qms.view.QC23', {
extend: 'Ext.form.FormPanel',
alias: 'widget.QC23View',
id: 'QC23View',
requires: ['Ext.form.FieldSet', 'Ext.Label'],
config: {
items: [
{
xtype: 'fieldset',
//defaults: { labelAlign: 'top' },
Id:'defectAdd',
layout:{
},
items: [
{
xtype: 'button',
text: 'New Defect',
id: 'DefectQC23Button',
ui: 'action'
},
{
xtype: 'button',
text: 'Remove Defect',
id: 'RemoveQC23Button',
ui: 'action'
}
]
}
]
}
and my controler
Ext.define('qms.controller.QC23con', {
extend: 'Ext.app.Controller',
config: {
refs: {
addDefectButton:'#DefectQC23Button',
rmDefectButton:'#RemoveQC23Button'
},
control: {
addDefectButton:{
tap: 'addDefect'
},
rmDefectButton:{
tap: 'removeDefect'
},
}
},
addDefect: function(button){
button.up('fieldset').add({
xtype: 'textfield',
name: 'MyField-' + button.up('fieldset').length
});
//Ext.getCmp('defectAdd').doLayout();
},
removeDefect: function(button){
button.up('fieldset').remove(button.up('fieldset').items.items[0]);
}
the function for adding item work fine, but when i remove the item my screen stuck. i am using google chrome for testing.
please give me solution for this issue.
thanks.
I noticed you are not checking for the xtype before removing an item from the fieldset. The code might be removing the button itself in which case it might cause your screen to freeze. I created a simple sencha fiddle https://fiddle.sencha.com/#fiddle/4tf that does what you are trying to accomplish.
replace the removeDefect function with this:
var lastItem = button.up('fieldset').items.items.length-1;
if(button.up('fieldset').items.items[lastItem].xtype ==='textfield')
button.up('fieldset').remove(button.up('fieldset').items.items[lastItem]);
Here is a simple illustration of what I mean. It works in IE, and FF, but not in Safari.
I have four panels which are dynamically added to a tabpanel item. Three are grid panels, and one is a form panel. I need to preserve the grids proportions or sizes. I tried several layout methods (table, column, absolute etc), and nothing seems work so far. For table layout, all sizes end up being the same width. It seems my best bet is column layout, and they seem to render properly in FF, IE, but not in Safari as shown in the image. (Here it seems that column goes to second row, when the item does not fit into the current row). Initially, the title bar, and several of the column headings does not show.
Any suggestions.
Thank you.
alt text http://pssnet.com/~devone/pssops3/testing/Screenshot.png
Your best bet is probably a BorderLayout. I'm not sure how you want the page to look so I can't tell what specific configuration would be best
EDIT: Since you are using Ext 3.1, you really should check out the new HBox (sample) and VBox (sample) layouts. They are extremely powerful and will do exactly what you need.
Ext.onReady(function() {
var panel = new Ext.Panel({
id:'main-panel',
baseCls:'x-plain',
renderTo: Ext.getBody(),
width: 600,
height: 400,
layout: {
type: 'vbox',
align:'stretch'
},
defaults: {
xtype: 'panel',
baseCls:'x-plain',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
}
},
items: [{
defaults: {
xtype: 'panel',
frame: true
},
items: [{
title: 'Item 1',
flex: 1
},{
title: 'Item 2',
flex: 2
}]
},{
defaults: {
xtype: 'panel',
frame: true
},
items: [{
title: 'Item 3',
html: 'sssssssssssss',
flex: 2
},{
title: 'Item 4',
flex: 1
}]
}]
});
});