PDA

View Full Version : Creating list dynamically using ajax call



gabrielstuff
9 Aug 2010, 10:38 AM
Hi all !
I am still digging into Sencha. I guess, familiarity with ExtJS, is one of the most BASIC you have to know when you dive in to Sencha Touch.
Any way, I am actually trying to modifying the example YQL sothat it makes ajax query to twitter and facebook.

I would like to know if anyone could help. I am trying to rendering the result as a LIST. I first try with a nested list and then I decide to use list and switch from the item to the concerning card.

here is the code :


Ext.YQL = {
useAllPublicTables: true,
yqlUrl: 'http://query.yahooapis.com/v1/public/yql',
request: function(cfg) {
var p = cfg.params || {};
p.q = cfg.query;
p.format = 'json';
if (this.useAllPublicTables) {
p.env = 'store://datatables.org/alltableswithkeys';
}

Ext.util.JSONP.request({
url: this.yqlUrl,
callbackKey: 'callback',
params: p,
callback: cfg.callback,
scope: cfg.scope || window
});
}
};

Ext.regModel('fbMod', {
fields: [ "id", "from", "message", "picture", "link", "name", "caption", "description", "icon", "type", "created_time", "updated_time"]
});
Ext.regModel('tweetMod', {
fields: ["id","profile_image_url","from_user","text"]
});

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function()
{
var demoLookup =
{
twitter: {
itemSelector: 'div.twitter',
singleSelect: true,
grouped: true,
indexBar: false,
store: new Ext.data.Store({
model: 'tweetMod',
proxy:
{
type: 'ajax',
url : 'http://search.twitter.com/search.json',
reader:
{
type: 'json',
root: 'results'
},
q: 'sencha',
rpp: 50,
suppress_response_codes: true
}
}),
tpl: new Ext.XTemplate([
'<tpl for=".">',
'<div class="tweet">',
'<div class="avatar"><img src="{profile_image_url}" /></div>',
'<div class="tweet-content">',
'<h2>{from_user}</h2>',
'<p>{text}</p>',
'</div>',
'</div>',
'</tpl>'
])
},
flickr: {
query: "select * from flickr.photos.recent",
tpl: new Ext.XTemplate([
'<tpl for="photo">',
'<div>{title}</div>',
'<img src="http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_t.jpg" /><br/>',
'<hr/>',
'</tpl>'
])
},
facebook: {
itemSelector: 'div.facebook',
singleSelect: true,
grouped: true,
indexBar: false,
store: new Ext.data.Store({
model: 'fbMod',
proxy:
{
type: 'ajax',
url : 'http://graph.facebook.com/106986762688577/feed/',
reader:
{
type: 'json',
root: 'data'
}
}
}),
tpl: new Ext.XTemplate([
'<tpl for=".">',
'<div class="facebook">',
'<div class="facebook-content">',
'<h3>{from.name}</h3>',
'<h2>{created_time}</h2>',
'<p>{message}</p>',
'</div>',
'</div>',
'</tpl>'
])
}
}



var makeYqlRequest = function(btn) {
var selected = btn.value;
var opts = demoLookup[selected];
if (opts) {
Ext.YQL.request({
query: opts.query,
callback: function(response) {
var results = [];
if (response.query && response.query.results) {
results = response.query.results;
}
Ext.getCmp('content').update(opts.tpl.apply(results));
Ext.getCmp('content').doComponentLayout();
}
});
}

};

var makeList = function(btn) {
var selected = btn.value;
var opts = demoLookup[selected];
if (opts) {
opts.store.load();
var list = new Ext.List(Ext.apply(opts, {scroll:"vertical"}));
Ext.getCmp('content').update(list.cmp);
}
};

new Ext.Panel({
fullscreen: true,
layout: 'card',
align:'center',
id: 'content',
scroll: 'vertical',
styleHtmlContent: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
cls: 'myClass',
layout: {
pack: 'justify',
},
items: [
{
xtype: 'button',
text: 'Facebook',
value: 'facebook',
handler: makeList
},
{
xtype: 'button',
text: 'Twitter',
value: 'twitter',
handler: makeList
},
{
xtype: 'button',
text: 'Lasr Flickr',
value: 'flickr',
handler: makeYqlRequest
}]
}],
html: '<div class="box"><h2>Playing around with extjs.</h2></div>'
});
}
});

Your help will be greatfully appreciated !

Thank you,

Gabriel

evant
9 Aug 2010, 6:58 PM
Simple example of loading twitter data into a list:



Ext.setup({
onReady: function(){

Ext.regModel('Tweet', {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'profile_image_url',
type: 'string'
}, {
name: 'from_user',
type: 'string'
}, {
name: 'text',
type: 'string'
}]
});

var store = new Ext.data.Store({
autoLoad: true,
model: 'Tweet',
proxy: {
url: 'http://search.twitter.com/search.json',
type: 'scripttag',
extraParams: {
q: 'extjs',
rpp: 50,
suppress_response_codes: true
},
reader: {
root: 'results'
}
}
});

new Ext.List({
fullscreen: true,
itemSelector: '.tweet',
tpl: '<tpl for="."><div class="tweet">{id} - {from_user}</div></tpl>',
store: store
});
}
});


The same thing applies for the others.

gabrielstuff
9 Aug 2010, 11:37 PM
Hi Evant !
Thank you for the detail.
My problem is not to load the data. It is more to load the data, and fill the list once I've clicked on the button.

I know that I can not use the same update methods that we have here :

Ext.getCmp('content').update(opts.tpl.apply(results));

Here is my problem, and I'm not guessing how to fix it.

Thank you for your time.

Gabriel

evant
10 Aug 2010, 12:24 AM
Ext.setup({
onReady: function(){

Ext.regModel('Tweet', {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'profile_image_url',
type: 'string'
}, {
name: 'from_user',
type: 'string'
}, {
name: 'text',
type: 'string'
}]
});

var store = new Ext.data.Store({
model: 'Tweet',
proxy: {
url: 'http://search.twitter.com/search.json',
type: 'scripttag',
extraParams: {
rpp: 50,
suppress_response_codes: true
},
reader: {
root: 'results'
}
}
});

new Ext.List({
fullscreen: true,
itemSelector: '.tweet',
tpl: '<tpl for="."><div class="tweet">{id} - {from_user}</div></tpl>',
store: store,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Load store',
handler: function(){
store.getProxy().extraParams.q = 'extjs';
store.read();
}
},{
text: 'Load store with a new param',
handler: function(){
store.getProxy().extraParams.q = 'ipad';
store.read();
}
}]
}]
});
}
});

gabrielstuff
10 Aug 2010, 1:49 AM
Thank you Evant !
Even if it is not what I was looking for.
It helps to understand how does code works.

Actually it is more a global architecture problem that I encounter : /

evant
10 Aug 2010, 2:04 AM
Perhaps I'm not clear on what you're asking then...

gabrielstuff
10 Aug 2010, 2:55 AM
Thank you for your responsiveness and reactivity. I've restructured my example sothat you understand it better.

1. I have a main application that use card to display specific info. I use an Extend of panel to reproduce TabPanel with bottom icon dock.
2. Each of my icon allow to load a specific card with items and it's own toolbar and specification.
3. One of this card is the one I am trying to show you.
A. it display json data from different source :
- facebook,
- twitter,
- a blog,
B. Click on each button allow to display the data dynamically into a list.
- the list contains a small excerpt
- binding a on navigate or onTap event to the list allow to switch card and display the full content
C. The Button Facebook, Flikr, twitter (or what ever) should be always displaying.
D. That is why I created an extend of panel with a layout card style, a toolbar on top in docked item and a list inside.

4. Now, here is the sample code :


Ext.ns('actu', 'Ext.ux');

Ext.regModel('fbMod', {
fields: [ "id", "from", "message", "picture", "link", "name", "caption", "description", "icon", "type", "created_time", "updated_time"]
});
Ext.regModel('tweetMod', {
fields: ["id","profile_image_url","from_user","text"]
});

Ext.ux.PanelActu = Ext.extend(Ext.Panel,{
fullscreen: true,
layout: 'card',
align:'center',
id: 'content',
scroll: 'vertical',
styleHtmlContent: true,
initComponent : function() {
this.dataLookup =
{
twitter: {
itemSelector: 'div.twitter',
singleSelect: true,
grouped: true,
indexBar: false,
store: new Ext.data.Store({
model: 'tweetMod',
proxy:
{
type: 'ajax',
url : 'http://search.twitter.com/search.json',
reader:
{
type: 'json',
root: 'results'
},
q: 'sencha',
rpp: 50,
suppress_response_codes: true
}
}),
tpl: new Ext.XTemplate([
'<tpl for=".">',
'<div class="tweet">',
'<div class="avatar"><img src="{profile_image_url}" /></div>',
'<div class="tweet-content">',
'<h2>{from_user}</h2>',
'<p>{text}</p>',
'</div>',
'</div>',
'</tpl>'
])
},
facebook: {
itemSelector: 'div.facebook',
singleSelect: true,
grouped: true,
indexBar: false,
store: new Ext.data.Store({
model: 'fbMod',
proxy:
{
type: 'ajax',
url : 'http://graph.facebook.com/106986762688577/feed/',
reader:
{
type: 'json',
root: 'data'
}
}
}),
tpl: new Ext.XTemplate([
'<tpl for=".">',
'<div class="facebook">',
'<div class="facebook-content">',
'<h3>{from.name}</h3>',
'<h2>{created_time}</h2>',
'<p>{message}</p>',
'</div>',
'</div>',
'</tpl>'
])
},
flikr: {
itemSelector: 'div.flikr',
singleSelect: true,
grouped: true,
indexBar: false,
store: new Ext.data.Store({
model: 'fbMod',
proxy:
{
type: 'ajax',
url : 'http://graph.facebook.com/106986762688577/feed/',
reader:
{
type: 'json',
root: 'data'
}
}
}),
tpl: new Ext.XTemplate([
'<tpl for=".">',
'<div class="flikr">',
'<div class="flikr-content">',
'<h3>{from.name}</h3>',
'<h2>{created_time}</h2>',
'<p>{message}</p>',
'</div>',
'</div>',
'</tpl>'
])
}

};


this.listContent = new Ext.List({
items: [],
width: 250,
height: 456,
listeners: {
scope: this
}
});

this.facebookButton = new Ext.Button({
text: 'Facebook',
value: 'facebook',
handler: this.makeList,
scope: this
});

this.twitterButton = new Ext.Button({
text: 'Twitter',
value: 'twitter',
handler: this.makeList,
scope: this
});

this.flikrButton = new Ext.Button({
text: 'Flikr Last',
value: 'flikr',
handler: this.makeList,
scope: this
});

this.navigationBar = new Ext.Toolbar({
dock: 'top',
cls: 'myClass',
layout: {
pack: 'justify',
},
items: [this.facebookButton, this.twitterButton,this.flikrButton].concat(this.buttons || [])
});

this.dockedItems = this.dockedItems || [];
this.dockedItems.unshift(this.navigationBar);

this.items = this.items || [];
this.items.unshift(this.listContent);

this.addEvents('navigate');
Ext.ux.PanelActu.superclass.initComponent.call(this);
},

onListChange : function(list, item) {
if (item.card) {
this.setCard(item.card, item.animation || 'slide');
this.currentCard = item.card;
if (item.text) {
this.navigationBar.setTitle(item.text);
}
if (Ext.platform.isPhone) {
this.backButton.show();
this.navigationBar.doLayout();
}
}
this.fireEvent('navigate', this, item, list);
},

makeList : function(btn) {
var selected = btn.value;
var opts = this.dataLookup[selected];
if (opts) {
this.listContent.setStore(opts.store);
opts.store.read();
this.listContent.refresh();
this.listContent.doComponentLayout();

//Ext.getCmp('content').update(list.cmp);
}
for (i = 0; i<this.navigationBar.items.items.length; i++){
this.navigationBar.items.items[i].removeClass('current');
}
btn.addClass('current');
}

});


actu.Main = {
init : function() {
this.ui = new Ext.ux.PanelActu({
title: 'actu',
listeners: {
navigate : this.onNavigate,
scope: this
}
});
},

onNavigate : function(ui, item) {
ui.navigationBar.doComponentLayout();
}
};

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function()
{
actu.Main.init();
}
});


P.S : I do not use the typing REG model as it is not necessary and I am looking to gain space.
P.S 2 : I know that the part to remove and add class could be more elegant but it is not one of my primary task to withdraw ! :)

Thanks a lot !

evant
10 Aug 2010, 3:01 AM
Use a card layout. Each data source (facebook, twitter) is one card in your layout. You can use setCard to choose the active one. Each of those can be a list or whatever you want it to be.

gabrielstuff
10 Aug 2010, 5:16 AM
Hi ! And thank you again,

I tried with the card layout configuration, which seems to be logical :

here is the index.js

Ext.ns('actu', 'Ext.ux', 'feed');

Ext.ux.PanelActu = Ext.extend(Ext.Panel,{
fullscreen: true,
layout: 'card',
align:'center',
id: 'content',
scroll: 'vertical',
styleHtmlContent: true,
initComponent : function() {
this.dataLookup =
{
facebook: {
itemSelector: 'div.facebook',
singleSelect: true,
grouped: true,
indexBar: false,
store: new Ext.data.Store({
model: 'fbMod',
proxy:
{
type: 'ajax',
url : 'http://graph.facebook.com/106986762688577/feed/',
reader:
{
type: 'json',
root: 'data'
}
}
}),
tpl: new Ext.XTemplate([
'<tpl for=".">',
'<div class="facebook">',
'<div class="facebook-content">',
'<h3>{from.name}</h3>',
'<h2>{created_time}</h2>',
'<p>{message}</p>',
'</div>',
'</div>',
'</tpl>'
])
},

};

this.facebookButton = new Ext.Button({
text: 'Facebook',
value: 'facebook',
handler: this.switchToCard,
scope: this
});

this.twitterButton = new Ext.Button({
text: 'Twitter',
value: 'twitter',
handler: this.switchToCard,
scope: this
});

this.flikrButton = new Ext.Button({
text: 'Flikr Last',
value: 'flikr',
handler: this.switchToCard,
scope: this
});

this.navigationBar = new Ext.Toolbar({
dock: 'top',
cls: 'myClass',
layout: {
pack: 'justify',
},
items: [this.facebookButton, this.twitterButton,this.flikrButton].concat(this.buttons || [])
});

this.dockedItems = this.dockedItems || [];
this.dockedItems.unshift(this.navigationBar);

this.addEvents('navigate');
Ext.ux.PanelActu.superclass.initComponent.call(this);
},

onListChange : function(list, item) {
if (item.card) {
this.setCard(item.card, item.animation || 'slide');
this.currentCard = item.card;
if (item.text) {
this.navigationBar.setTitle(item.text);
}
if (Ext.platform.isPhone) {
this.backButton.show();
this.navigationBar.doLayout();
}
}
this.fireEvent('navigate', this, item, list);
},

makeList : function(btn) {
var selected = btn.value;
var opts = this.dataLookup[selected];
if (opts) {

}
for (i = 0; i<this.navigationBar.items.items.length; i++){
this.navigationBar.items.items[i].removeClass('current');
}
btn.addClass('current');
},

switchToCard : function(btn){
var selected = btn.value;
for(i =0; i< this.navigationItems.length; i++)
{
if (this.navigationItems[i].value == selected) {
var item = this.navigationItems[i];
}
}
if(item) {
item.card.loadData();
this.setCard(item.card, item.animation || 'slide');
this.currentCard = item.card;
}

for (i = 0; i<this.navigationBar.items.items.length; i++){
this.navigationBar.items.items[i].removeClass('current');
}
btn.addClass('current');
}

});


actu.Main = {
init : function() {
this.ui = new Ext.ux.PanelActu({
navigationItems: actu.Structure,
title: 'actu',
listeners: {
navigate : this.onNavigate,
scope: this
}
});
},

onNavigate : function(ui, item) {
ui.navigationBar.doComponentLayout();
}
};

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function()
{
actu.Main.init();
}
});


here is the structure.js:


actu.Structure = [
{
value: 'facebook',
card: feed.Facebook
},
{
value: 'twitter',
card: feed.Twitter
},
{
value: 'flikr',
card: feed.Flikr
}
];

and finally the twitter.js or what ever other files :

Ext.regModel('tweetMod', {
fields: ["id","profile_image_url","from_user","text"]
});

feed.TwitterStore = new Ext.data.Store({
model: 'tweetMod',
proxy:
{
type: 'ajax',
url : 'http://search.twitter.com/search.json',
reader:
{
type: 'json',
root: 'results'
},
q: 'sencha',
rpp: 50,
suppress_response_codes: true
}
});

feed.Twitter = new Ext.List({
layout: Ext.platform.isPhone ? 'fit' : {
type: 'vbox',
align: 'center',
pack: 'center'
},
cls: 'demo-list',
width: 300,
height: 500,
xtype: 'list',
store: feed.TwitterStore,
tpl: '<tpl for="."><div class="tweet"><div class="avatar"><img src="{profile_image_url}" /></div><div class="tweet-content"><h2>{from_user}</h2><p>{text}</p></div></div></tpl>',
itemSelector: 'div.twitter',
singleSelect: true,
grouped: true,

loadData : function() {
feed.TwitterStore.read();
feed.Twitter.refresh();
}
});

For the moment, just the card shows up... but still empty :( I do not see any xhr activity when loading the store...

any idea ?

gabrielstuff
10 Aug 2010, 5:45 AM
Hi !
Well, i've get a little further. Using :


proxy:
{
type: 'scripttag',
...
}

instead of

proxy:
{
type: 'ajax',
...


allow me to make the xhr request. Now, the error is :

Uncaught TypeError: Cannot read property 'prototype' of undefined :

Using a different Model, doesn't seem to change a thing :


Ext.regModel('tweetMod', {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'profile_image_url',
type: 'string'
}, {
name: 'from_user',
type: 'string'
}, {
name: 'text',
type: 'string'
}]
});

Well, one more step !

Thank you !

evant
10 Aug 2010, 5:46 AM
You're making it way too complicated for yourself. Start off with a simple app, then build on it. Just get the data loading for one card.

Walk before run!

gabrielstuff
10 Aug 2010, 5:54 AM
Thank you, i'll make a first move then.

gabrielstuff
10 Aug 2010, 7:22 AM
Well, I actually double checked each-line and found some little crazy lines. Thank you for your advice, now it runs as it should... not yet as I wanted but at least I display things.

Here are the samples that worked, I do not know if it is the best solution, but it is one, i take time to pull appart unnecessary data.

twitter.js



Ext.regModel('tweetMod', {
fields: ["id", "profile_image_url","from_user","string","text"]
});

feed.TwitterStore = new Ext.data.Store({
model: 'tweetMod',
proxy:
{
url : 'http://search.twitter.com/search.json',
type: 'scripttag',
extraParams:
{
q: 'extjs',
rpp: 50,
suppress_response_codes: true
},
reader:
{
root: 'results'
}
}
});

feed.Twitter = new Ext.List({
store: feed.TwitterStore,
tpl: '<tpl for="."><div class="tweet"><div class="avatar"><img src="{profile_image_url}" /></div><div class="tweet-content"><h2>{from_user}</h2><p>{text}</p></div></div></tpl>',
itemSelector: 'div.tweet',
cls: 'myClass',
loadData : function() {
feed.TwitterStore.load();
feed.TwitterStore.read();
feed.Twitter.refresh();
}
});


facebook.js


Ext.regModel('fbMod', {
fields: ["id", "from", "message", "picture", "link", "name", "caption", "description", "icon", "type", "created_time", "updated_time"]
});

feed.FacebookStore = new Ext.data.Store({
model: 'fbMod',
proxy:
{
url : 'http://graph.facebook.com/106986762688577/feed/',
type: 'scripttag',
reader:
{
root: 'data'
}
}
});

feed.Facebook = new Ext.List({
store: feed.FacebookStore,
tpl: '<tpl for="."><div class="facebook"><div class="facebook-content"><h3>{from.name}</h3><h2>{created_time}</h2><p>{message}</p></div></div></tpl>',
itemSelector: '.facebook',
cls: 'myClass',
loadData : function() {
feed.FacebookStore.load();
feed.FacebookStore.read();
feed.Facebook.refresh();
}
});

structur.js

actu.Structure = [
{
value: 'facebook',
card: feed.Facebook
},
{
value: 'twitter',
card: feed.Twitter
}
];

And finaly the main code :

index.js


Ext.ns('actu', 'Ext.ux', 'feed');

Ext.ux.PanelActu = Ext.extend(Ext.Panel,{
fullscreen: true,
layout: 'card',
align:'center',
id: 'content',
scroll: 'vertical',
styleHtmlContent: true,
initComponent : function() {

this.facebookButton = new Ext.Button({
text: 'Facebook',
value: 'facebook',
handler: this.switchToCard,
scope: this
});

this.twitterButton = new Ext.Button({
text: 'Twitter',
value: 'twitter',
handler: this.switchToCard,
scope: this
});

this.navigationBar = new Ext.Toolbar({
dock: 'top',
cls: 'myClass',
layout: {
pack: 'justify',
},
items: [this.facebookButton, this.twitterButton].concat(this.buttons || [])
});

this.dockedItems = this.dockedItems || [];
this.dockedItems.unshift(this.navigationBar);

//this.addEvents('navigate');
Ext.ux.PanelActu.superclass.initComponent.call(this);
},

switchToCard : function(btn){
var selected = btn.value;
for(i = 0; i< this.navigationItems.length; i++)
{
if (this.navigationItems[i].value == selected) {
var item = this.navigationItems[i];
}
}
if(item) {
item.card.loadData();
this.setCard(item.card, item.animation || 'slide');
this.currentCard = item.card;
}

for (i = 0; i<this.navigationBar.items.items.length; i++){
this.navigationBar.items.items[i].removeClass('current');
}
btn.addClass('current');
}

});


actu.Main = {
init : function() {
this.ui = new Ext.ux.PanelActu({
navigationItems: actu.Structure,
title: 'actu',
});
},

onNavigate : function(ui, item) {
ui.navigationBar.doComponentLayout();
}
};

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function()
{
actu.Main.init();
}
});



The first thing that I do not like is that even if I call the loadData function before calling setCard, the card appears before the data are displayed. I think I should had some kind of call back to be sure that the data will be loaded before I call on the set card ? am I right ?

Then the other thing is that my list is scrollable. What I need to do is to scrol the pannel and make the list static on it...
Does that kind of thing is possible ?


Thank you again, taking time to read helps.

Gabriel

evant
10 Aug 2010, 4:00 PM
Don't override the loadData method. Also, read and load are the same thing, so you're telling it to bring in the data twice. Also, the view will automatically be refreshed when the data loads, so that is redundant.

There's nothing you can do about the data not being loaded. It's pulling it in over an http request.

In the next version, there will be a "read" event you can listen to on the store.

If you don't want the lists to scroll, set them to scroll: ''

gabrielstuff
11 Aug 2010, 2:02 AM
Hi Evant Thank you for your response.
I was playing with date format :)

Well about the overriding thing, i am not applying this method to the store but to the List and I could not find a loadData method into the list specification.
I also removed a you suggested the list.refresh and read method. Now I am just using load method, which is working nicely.

Finally for the scrolling part, the behaviour is different depending on facebook feed or twitter feed using scroll:''.

But, it is not what I am trying to do. What I want is my list displaying into the pannel, and when I scroll, the whole pannel goes under the toolbar. I would like a fulllength display list. Meaning the whole list is displaying. If anybody wee what I am talking about, it is like the configuration pannel in SettingApp or the facebook wall in facebook app.
I do not want the element in the list to be scrollable.

I've been trying with minHeight:VALUE, but it didn't gave me any result. When I scroll into the card, the list goes up and get cut at the bottom like if it was not rendered :(

Thank you !

gabrielstuff
12 Aug 2010, 8:47 AM
Hi !
Thank you again for the work that have already been done. It is great to work with this framework.

As always many path lead to the same rendering but we have sometimes different behaviour :

Long path but an efficient one,
Short path but very consuming,
...
Some kind of middle long path, that could be ok.



As I was already wondering how to get a LIST that is not scrolable inside the list but more in the panel. Here are my option, and I would like to know which is the best :


embeded the list into a container, rendering the list with a height that is bigger than the container ?
not using list but div that I will display as list element and put them into a container ?
something that I have not yet imaginate, and you might propose ?


Please find attached picture of what I am trying to accomplished :
http://img717.imageshack.us/img717/9072/listfjm.jpg

So what could be the best ?
Thank you by advance

gabrielstuff
12 Aug 2010, 10:31 AM
Ok, I finally choose the CSS method :


.team h2{
margin:0 1.5em 0 0.5em;
font-weight:bold;
clear:both;
}

.team p{
margin:0 1.5em 0 0.5em;
}

.team .x-list-parent{
-webkit-border-radius: 0.6em;
background-color:#FFF;
width: 100%;
margin:auto;
border:2px solid #EAEAEA;
}

.team .x-panel-body{
padding:20px;
background-color:#000;
}

Using padding, width and margin. We are almost there. I just have a little problem with the first and last element.

I've been trying :
:not(:first-of-type):not(:last-of-type) CSS selector... but I noticed no effect unless I modify the


x-list .x-list-group-items > *:not(:first-of-type):not(:last-of-type) {
border-bottom: 1px solid #EAEAEA;
border-top: 1px solid white;
}
x-list.x-list-flat .x-list-parent > *:not(:first-of-type):not(:last-of-type){
border-bottom: 1px solid #EAEAEA;
border-top: 1px solid white;
}
But it breaks the code... :(

Well one other question :
why when a div element belonging to the list disappear from the main panel, as you scroll Ext give him an id ?? I do not get it, what does it stand for ?

Thank you ! Keep searching, the best solution !



P.S :
here the sample image :
http://img841.imageshack.us/img841/8614/showoff.png