-
☆ A M B ☆
- 24,524 Posts
If an ExtJS window is too large for the screen, how can I add a scrollbar to the window configuration? For example, this window:
SM.window.Products = function(config) {
config = config || {};
Ext.applyIf(config,{
title: _('sm.product'),
url: SM.config.connector_url,
closeAction: 'close',
baseParams: {
action: 'mgr/products/save'
},
fields: [{
name: 'product_id',
xtype: 'hidden'
},{
...
...
...
});
SM.window.Products.superclass.constructor.call(this,config);
};
Ext.extend(SM.window.Products,MODx.Window);
Ext.reg('sm-window-products',SM.window.Products);
-
☆ A M B ☆
- 3,141 Posts
Probably will need to define a height for the window, autoScoll may help in that case as well.
As that's SubscribeMe's product window I'm going to guess the list of products is getting too large: could set the grid's pageSize to like 5 to make sure it doesn't get too large, allowing pagination instead of scrolling.
-
☆ A M B ☆
- 24,524 Posts
Hi, Mark. No, this is for the actual window with the form for creating a new product. The form is too long. It's centered on the screen so the top and bottom of the form are out of view and inaccessible. I can initially create a product as at that point the top of the form is accessible, but the bottom isn't. If I then modify the product I can tab to the previously inaccessible bottom fields, but the top fields are no longer accessible at all.
Lucas, I did add autoScroll there (I've spent days buried in the Sancha docs) but it didn't help. I still can't make heads nor tails of the MODx renderings of ExtJS, but I suspect that somewhere there's certain default configurations that are not being overridden in the correct place.
I worked with ExtJS years ago when Revo was being developed and was going to use it. Didn't like it then and still don't like it. Feels "brittle" and "fragile" to me. But then I haven't like Smarty either since I played around with it before I ever discovered the MODx extensions to Etomite. I'm on the verge of just making my own CMP interfaces skipping the ExtJS and Smarty business altogether.
-
☆ A M B ☆
- 3,141 Posts
Aaaah, *that* window!
Just wondering, what version of SubscribeMe are you using, or from what branch on Github? The modx-2.2 branch (1.1 release) has an updated window where the fields are put next to each other to save space. See attached.
Even with that though, I suppose it would be better to put the product permissions to the side (using a column layout) to prevent that from happening when a lot of permissions are set still.
-
☆ A M B ☆
- 24,524 Posts
-
☆ A M B ☆
- 3,141 Posts
???
What browser/ui? Does the JS have the layout: 'column' or did something go wrong releasing the package? Did you get it from package manager, or the source from git? What browser?
-
☆ A M B ☆
- 24,524 Posts
OSX, FF (up-to-date) and Safari
Don't know anything about layout: 'column', where should I look for that?
Package manager.
-
☆ A M B ☆
- 3,141 Posts
assets/js/mgr/products/window.products.js
SM.window.Products = function(config) {
config = config || {};
Ext.applyIf(config,{
title: _('sm.product'),
url: SM.config.connector_url,
closeAction: 'close',
baseParams: {
action: 'mgr/products/save'
},
fields: [{
name: 'product_id',
xtype: 'hidden'
},{
name: 'name',
xtype: 'textfield',
fieldLabel: _('sm.name'),
allowBlank: false,
width: '95%'
},{
name: 'description',
fieldLabel: _('sm.description'),
xtype: 'textarea',
height: 130,
width: '95%'
},{
layout:'column', /* <======== */
items:[{
columnWidth:.5,
layout:'form',
items:[{
name: 'price',
fieldLabel: _('sm.price'),
xtype: 'numberfield',
allowNegative: false,
allowBlank: false,
width: '93%'
},{
...
I've found the best way into it is digging through Shaun's core code and using the Sencha docs as a reference. As more people on this forum get into it, the more we will be able to help each other out.